flexlayout-react 0.8.7 → 0.8.8

package/ChangeLog.txt

@@ -1,3 +1,8 @@
+0.8.8
+Enable esc to close overflow menu 
+Prevent initial reposition flash when there are hidden tabs
+Removed Roboto font from demo
+
 0.8.7
 Improved tab scrolling into visible area
 Added sections about tab and tabset customization to readme

package/declarations/view/Layout.d.ts

@@ -98,7 +98,7 @@ export declare class Layout extends React.Component<ILayoutProps> {
     /** Get the root div element of the layout */
     getRootDiv(): HTMLDivElement | null;
 }
-export declare const FlexLayoutVersion = "0.8.7";
+export declare const FlexLayoutVersion = "0.8.8";
 export type DragRectRenderCallback = (content: React.ReactNode | undefined, node?: Node, json?: IJsonTabNode) => React.ReactNode | undefined;
 export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 export type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>, items: {

package/dist/flexlayout.js

@@ -326,7 +326,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \***********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BorderTabSet: () => (/* binding */ BorderTabSet)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _BorderButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PopupMenu */ \"./src/view/PopupMenu.tsx\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n\n\n\n\n/** @internal */\nconst BorderTabSet = (props) => {\n    const { border, layout, size } = props;\n    const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const miniScrollRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const tabStripInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const icons = layout.getIcons();\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        border.setTabHeaderRect(layout.getBoundingClientRect(selfRef.current));\n    });\n    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__.useTabOverflow)(layout, border, _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef, layout.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_BUTTON));\n    const onAuxMouseClick = (event) => {\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_9__.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(border, event);\n        }\n    };\n    const onContextMenu = (event) => {\n        layout.showContextMenu(border, event);\n    };\n    const onInterceptPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onOverflowClick = (event) => {\n        const callback = layout.getShowOverflowMenu();\n        const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });\n        if (callback !== undefined) {\n            callback(border, event, items, onOverflowItemSelect);\n        }\n        else {\n            const element = overflowbuttonRef.current;\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, border, items, onOverflowItemSelect, layout);\n        }\n        event.stopPropagation();\n    };\n    const onOverflowItemSelect = (item) => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.selectTab(item.node.getId()));\n        userControlledPositionRef.current = false;\n    };\n    const onPopoutTab = (event) => {\n        const selectedTabNode = border.getChildren()[border.getSelected()];\n        if (selectedTabNode !== undefined) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.popoutTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    const cm = layout.getClassName;\n    const tabButtons = [];\n    const layoutTab = (i) => {\n        let isSelected = border.getSelected() === i;\n        let child = border.getChildren()[i];\n        tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderButton__WEBPACK_IMPORTED_MODULE_2__.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: border.getPath() + \"/tb\" + i, key: child.getId(), selected: isSelected, icons: icons }));\n        if (i < border.getChildren().length - 1) {\n            tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER) }));\n        }\n    };\n    for (let i = 0; i < border.getChildren().length; i++) {\n        layoutTab(i);\n    }\n    let borderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n    if (border.getClassName() !== undefined) {\n        borderClasses += \" \" + border.getClassName();\n    }\n    // allow customization of tabset right/bottom buttons\n    let buttons = [];\n    let stickyButtons = [];\n    const renderState = { buttons, stickyButtons: stickyButtons, overflowPosition: undefined };\n    layout.customizeTabSet(border, renderState);\n    buttons = renderState.buttons;\n    if (renderState.overflowPosition === undefined) {\n        renderState.overflowPosition = stickyButtons.length;\n    }\n    if (stickyButtons.length > 0) {\n        if (isTabOverflow) {\n            buttons = [...stickyButtons, ...buttons];\n        }\n        else {\n            tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    if (hiddenTabs.length > 0) {\n        const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Overflow_Menu_Tooltip);\n        let overflowContent;\n        if (typeof icons.more === \"function\") {\n            const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });\n            overflowContent = icons.more(border, items);\n        }\n        else {\n            overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n                icons.more,\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\n        }\n        buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));\n    }\n    const selectedIndex = border.getSelected();\n    if (selectedIndex !== -1) {\n        const selectedTabNode = border.getChildren()[selectedIndex];\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {\n            const popoutTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Popout_Tab);\n            buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"popout\", title: popoutTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n        }\n    }\n    const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n    let innerStyle = {};\n    let outerStyle = {};\n    const borderHeight = size - 1;\n    if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.LEFT) {\n        innerStyle = { right: \"100%\", top: 0 };\n        outerStyle = { width: borderHeight, overflowY: \"auto\" };\n    }\n    else if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.RIGHT) {\n        innerStyle = { left: \"100%\", top: 0 };\n        outerStyle = { width: borderHeight, overflowY: \"auto\" };\n    }\n    else {\n        innerStyle = { left: 0 };\n        outerStyle = { height: borderHeight, overflowX: \"auto\" };\n    }\n    let miniScrollbar = undefined;\n    if (border.isEnableTabScrollbar()) {\n        miniScrollbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: miniScrollRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR), onPointerDown: onScrollPointerDown }));\n    }\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, style: {\n            display: \"flex\",\n            flexDirection: (border.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.VERT ? \"row\" : \"column\")\n        }, className: borderClasses, \"data-layout-path\": border.getPath(), onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER) },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabStripInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()), style: outerStyle, onScroll: onScroll },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: innerStyle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabButtons)),\n            miniScrollbar),\n        toolbar));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BorderTabSet: () => (/* binding */ BorderTabSet)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _BorderButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PopupMenu */ \"./src/view/PopupMenu.tsx\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n\n\n\n\n\n\n\n/** @internal */\nconst BorderTabSet = (props) => {\n    const { border, layout, size } = props;\n    const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const miniScrollRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const tabStripInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const icons = layout.getIcons();\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        border.setTabHeaderRect(layout.getBoundingClientRect(selfRef.current));\n    });\n    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__.useTabOverflow)(layout, border, _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef, layout.getClassName(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_BUTTON));\n    const onAuxMouseClick = (event) => {\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_9__.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(border, event);\n        }\n    };\n    const onContextMenu = (event) => {\n        layout.showContextMenu(border, event);\n    };\n    const onInterceptPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onOverflowClick = (event) => {\n        const callback = layout.getShowOverflowMenu();\n        const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });\n        if (callback !== undefined) {\n            callback(border, event, items, onOverflowItemSelect);\n        }\n        else {\n            const element = overflowbuttonRef.current;\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, border, items, onOverflowItemSelect, layout);\n        }\n        event.stopPropagation();\n    };\n    const onOverflowItemSelect = (item) => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.selectTab(item.node.getId()));\n        userControlledPositionRef.current = false;\n    };\n    const onPopoutTab = (event) => {\n        const selectedTabNode = border.getChildren()[border.getSelected()];\n        if (selectedTabNode !== undefined) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.popoutTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    const cm = layout.getClassName;\n    const tabButtons = [];\n    const layoutTab = (i) => {\n        let isSelected = border.getSelected() === i;\n        let child = border.getChildren()[i];\n        tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderButton__WEBPACK_IMPORTED_MODULE_2__.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: border.getPath() + \"/tb\" + i, key: child.getId(), selected: isSelected, icons: icons }));\n        if (i < border.getChildren().length - 1) {\n            tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER) }));\n        }\n    };\n    for (let i = 0; i < border.getChildren().length; i++) {\n        layoutTab(i);\n    }\n    let borderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n    if (border.getClassName() !== undefined) {\n        borderClasses += \" \" + border.getClassName();\n    }\n    // allow customization of tabset right/bottom buttons\n    let buttons = [];\n    let stickyButtons = [];\n    const renderState = { buttons, stickyButtons: stickyButtons, overflowPosition: undefined };\n    layout.customizeTabSet(border, renderState);\n    buttons = renderState.buttons;\n    if (renderState.overflowPosition === undefined) {\n        renderState.overflowPosition = stickyButtons.length;\n    }\n    if (stickyButtons.length > 0) {\n        if (isDockStickyButtons) {\n            buttons = [...stickyButtons, ...buttons];\n        }\n        else {\n            tabButtons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    if (isShowHiddenTabs) {\n        const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Overflow_Menu_Tooltip);\n        let overflowContent;\n        if (typeof icons.more === \"function\") {\n            const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });\n            overflowContent = icons.more(border, items);\n        }\n        else {\n            overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n                icons.more,\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length > 0 ? hiddenTabs.length : \"\")));\n        }\n        buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));\n    }\n    const selectedIndex = border.getSelected();\n    if (selectedIndex !== -1) {\n        const selectedTabNode = border.getChildren()[selectedIndex];\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {\n            const popoutTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Popout_Tab);\n            buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"popout\", title: popoutTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n        }\n    }\n    const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n    let innerStyle = {};\n    let outerStyle = {};\n    const borderHeight = size - 1;\n    if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.LEFT) {\n        innerStyle = { right: \"100%\", top: 0 };\n        outerStyle = { width: borderHeight, overflowY: \"auto\" };\n    }\n    else if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.RIGHT) {\n        innerStyle = { left: \"100%\", top: 0 };\n        outerStyle = { width: borderHeight, overflowY: \"auto\" };\n    }\n    else {\n        innerStyle = { left: 0 };\n        outerStyle = { height: borderHeight, overflowX: \"auto\" };\n    }\n    let miniScrollbar = undefined;\n    if (border.isEnableTabScrollbar()) {\n        miniScrollbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: miniScrollRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR), onPointerDown: onScrollPointerDown }));\n    }\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, style: {\n            display: \"flex\",\n            flexDirection: (border.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.VERT ? \"row\" : \"column\")\n        }, className: borderClasses, \"data-layout-path\": border.getPath(), onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER) },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabStripInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()), style: outerStyle, onScroll: onScroll },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: innerStyle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabButtons)),\n            miniScrollbar),\n        toolbar));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
 
 /***/ }),
 
@@ -366,7 +366,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   FlexLayoutVersion: () => (/* binding */ FlexLayoutVersion),\n/* harmony export */   Layout: () => (/* binding */ Layout),\n/* harmony export */   LayoutInternal: () => (/* binding */ LayoutInternal)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/client.js\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _BorderTab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./BorderTab */ \"./src/view/BorderTab.tsx\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _DragContainer__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./DragContainer */ \"./src/view/DragContainer.tsx\");\n/* harmony import */ var _ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\n/* harmony import */ var _PopoutWindow__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PopoutWindow */ \"./src/view/PopoutWindow.tsx\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Overlay */ \"./src/view/Overlay.tsx\");\n/* harmony import */ var _Row__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Row */ \"./src/view/Row.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/* harmony import */ var _SizeTracker__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./SizeTracker */ \"./src/view/SizeTracker.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * A React component that hosts a multi-tabbed layout\n */\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    /** @internal */\n    constructor(props) {\n        super(props);\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.revision = 0;\n    }\n    /** re-render the layout */\n    redraw() {\n        this.selfRef.current.redraw(\"parent \" + this.revision);\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     * @returns the added tab node or undefined\n     */\n    addTabToTabSet(tabsetId, json) {\n        return this.selfRef.current.addTabToTabSet(tabsetId, json);\n    }\n    /**\n     * Adds a new tab by dragging an item to the drop location, must be called from within an HTML\n     * drag start handler. You can use the setDragComponent() method to set the drag image before calling this\n     * method.\n     * @param event the drag start event\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete\n     */\n    addTabWithDragAndDrop(event, json, onDrop) {\n        this.selfRef.current.addTabWithDragAndDrop(event, json, onDrop);\n    }\n    /**\n     * Move a tab/tabset using drag and drop, must be called from within an HTML\n     * drag start handler\n     * @param event the drag start event\n     * @param node the tab or tabset to drag\n     */\n    moveTabWithDragAndDrop(event, node) {\n        this.selfRef.current.moveTabWithDragAndDrop(event, node);\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     * @returns the added tab node or undefined\n     */\n    addTabToActiveTabSet(json) {\n        return this.selfRef.current.addTabToActiveTabSet(json);\n    }\n    /**\n     * Sets the drag image from a react component for a drag event\n     * @param event the drag event\n     * @param component the react component to be used for the drag image\n     * @param x the x position of the drag cursor on the image\n     * @param y the x position of the drag cursor on the image\n     */\n    setDragComponent(event, component, x, y) {\n        this.selfRef.current.setDragComponent(event, component, x, y);\n    }\n    /** Get the root div element of the layout */\n    getRootDiv() {\n        return this.selfRef.current.getRootDiv();\n    }\n    /** @internal */\n    render() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));\n    }\n}\n/** @internal */\nclass LayoutInternal extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    // private renderCount: any;\n    constructor(props) {\n        super(props);\n        this.moveableElementMap = new Map();\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        this.updateLayoutMetrics = () => {\n            if (this.findBorderBarSizeRef.current) {\n                const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== this.state.calculatedBorderBarSize) {\n                    this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        this.onModelChange = (action) => {\n            this.redrawInternal(\"model change\");\n            if (this.props.onModelChange) {\n                this.props.onModelChange(this.props.model, action);\n            }\n        };\n        this.updateRect = () => {\n            const rect = this.getDomRect();\n            if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                // console.log(\"updateRect\", rect.floor());\n                this.setState({ rect });\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    this.redrawInternal(\"rect updated\");\n                }\n            }\n        };\n        this.getClassName = (defaultClassName) => {\n            if (this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return this.props.classNameMapper(defaultClassName);\n            }\n        };\n        this.onCloseWindow = (windowLayout) => {\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.closeWindow(windowLayout.windowId));\n        };\n        this.onSetWindow = (windowLayout, window) => {\n        };\n        this.showControlInPortal = (control, element) => {\n            const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\n            this.setState({ portal });\n        };\n        this.hideControlInPortal = () => {\n            this.setState({ portal: undefined });\n        };\n        this.getIcons = () => {\n            return this.icons;\n        };\n        this.setDragNode = (event, node) => {\n            LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Internal, node, undefined, undefined);\n            // Note: can only set (very) limited types on android! so cannot set json\n            // Note: must set text/plain for android to allow drag, \n            //  so just set a simple message indicating its a flexlayout drag (this is not used anywhere else)\n            event.dataTransfer.setData('text/plain', \"--flexlayout--\");\n            event.dataTransfer.effectAllowed = \"copyMove\";\n            event.dataTransfer.dropEffect = \"move\";\n            this.dragEnterCount = 0;\n            if (node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__.TabSetNode) {\n                let rendered = false;\n                let content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabset);\n                if (node.getChildren().length > 0) {\n                    content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabs).replace(\"?\", String(node.getChildren().length));\n                }\n                if (this.props.onRenderDragRect) {\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, 10, 10);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    this.setDragComponent(event, content, 10, 10);\n                }\n            }\n            else {\n                const element = event.target;\n                const rect = element.getBoundingClientRect();\n                const offsetX = event.clientX - rect.left;\n                const offsetY = event.clientY - rect.top;\n                const parentNode = node === null || node === void 0 ? void 0 : node.getParent();\n                const isInVerticalBorder = parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__.BorderNode && parentNode.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_5__.Orientation.HORZ;\n                const x = isInVerticalBorder ? 10 : offsetX;\n                const y = isInVerticalBorder ? 10 : offsetY;\n                let rendered = false;\n                if (this.props.onRenderDragRect) {\n                    const content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { key: node.getId(), layout: this, node: node });\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, x, y);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    if ((0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isSafari)()) { // safari doesnt render the offscreen tabstamps\n                        this.setDragComponent(event, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { node: node, layout: this }), x, y);\n                    }\n                    else {\n                        event.dataTransfer.setDragImage(node.getTabStamp(), x, y);\n                    }\n                }\n            }\n        };\n        this.onDragEnterRaw = (event) => {\n            this.dragEnterCount++;\n            if (this.dragEnterCount === 1) {\n                this.onDragEnter(event);\n            }\n        };\n        this.onDragLeaveRaw = (event) => {\n            this.dragEnterCount--;\n            if (this.dragEnterCount === 0) {\n                this.onDragLeave(event);\n            }\n        };\n        this.onDragEnter = (event) => {\n            // console.log(\"onDragEnter\", this.windowId, this.dragEnterCount);\n            var _a;\n            if (!LayoutInternal.dragState && this.props.onExternalDrag) { // not internal dragging\n                const externalDrag = this.props.onExternalDrag(event);\n                if (externalDrag) {\n                    const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(externalDrag.json, this.props.model, false);\n                    LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.External, tempNode, externalDrag.json, externalDrag.onDrop);\n                }\n            }\n            if (LayoutInternal.dragState) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID && LayoutInternal.dragState.mainLayout === this.mainLayout) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);\n                }\n                if (LayoutInternal.dragState.mainLayout !== this.mainLayout) {\n                    return; // drag not by this layout or its popouts\n                }\n                event.preventDefault();\n                this.dropInfo = undefined;\n                const rootdiv = this.selfRef.current;\n                this.outlineDiv = this.currentDocument.createElement(\"div\");\n                this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                this.outlineDiv.style.visibility = \"hidden\";\n                const speed = this.props.model.getAttribute(\"tabDragSpeed\");\n                this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\n                rootdiv.appendChild(this.outlineDiv);\n                this.dragging = true;\n                this.showOverlay(true);\n                // add edge indicators\n                if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const r = new _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect(event.clientX - (clientRect.left), event.clientY - (clientRect.top), 1, 1);\n                r.positionElement(this.outlineDiv);\n            }\n        };\n        this.onDragOver = (event) => {\n            var _a, _b, _c;\n            if (this.dragging && !this.isDraggingOverWindow) {\n                // console.log(\"onDragOver\");\n                event.preventDefault();\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const pos = {\n                    x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\n                    y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\n                };\n                this.checkForBorderToShow(pos.x, pos.y);\n                let dropInfo = this.props.model.findDropTargetNode(this.windowId, LayoutInternal.dragState.dragNode, pos.x, pos.y);\n                if (dropInfo) {\n                    this.dropInfo = dropInfo;\n                    if (this.outlineDiv) {\n                        this.outlineDiv.className = this.getClassName(dropInfo.className);\n                        dropInfo.rect.positionElement(this.outlineDiv);\n                        this.outlineDiv.style.visibility = \"visible\";\n                    }\n                }\n            }\n        };\n        this.onDragLeave = (event) => {\n            // console.log(\"onDragLeave\", this.windowId, this.dragging);\n            if (this.dragging) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);\n                }\n                this.clearDragLocal();\n            }\n        };\n        this.onDrop = (event) => {\n            // console.log(\"ondrop\", this.windowId, this.dragging, Layout.dragState);\n            if (this.dragging) {\n                event.preventDefault();\n                const dragState = LayoutInternal.dragState;\n                if (this.dropInfo) {\n                    if (dragState.dragJson !== undefined) {\n                        const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                        if (dragState.fnNewNodeDropped !== undefined) {\n                            dragState.fnNewNodeDropped(newNode, event);\n                        }\n                    }\n                    else if (dragState.dragNode !== undefined) {\n                        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                    }\n                }\n                this.mainLayout.clearDragMain();\n            }\n            this.dragEnterCount = 0; // must set to zero here ref sublayouts\n        };\n        this.orderedIds = [];\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.moveablesRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.mainRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\n        this.windowId = props.windowId ? props.windowId : _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n        this.mainLayout = this.props.mainLayout ? this.props.mainLayout : this;\n        this.isDraggingOverWindow = false;\n        this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n        this.layoutWindow.layout = this;\n        this.popoutWindowName = this.props.popoutWindowName || \"Popout Window\";\n        // this.renderCount = 0;\n        this.state = {\n            rect: _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty(),\n            editingTab: undefined,\n            showEdges: false,\n            showOverlay: false,\n            calculatedBorderBarSize: 29,\n            layoutRevision: 0,\n            forceRevision: 0,\n            showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER\n        };\n        this.isMainWindow = this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n    }\n    componentDidMount() {\n        this.updateRect();\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.layoutWindow.window = this.currentWindow;\n        this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n        this.resizeObserver = new ResizeObserver(entries => {\n            requestAnimationFrame(() => {\n                this.updateRect();\n            });\n        });\n        if (this.selfRef.current) {\n            this.resizeObserver.observe(this.selfRef.current);\n        }\n        if (this.isMainWindow) {\n            this.props.model.addChangeListener(this.onModelChange);\n            this.updateLayoutMetrics();\n        }\n        else {\n            // since resizeObserver doesn't always work as expected when observing element in another document\n            this.currentWindow.addEventListener(\"resize\", () => {\n                this.updateRect();\n            });\n            const sourceElement = this.props.mainLayout.getRootDiv();\n            const targetElement = this.selfRef.current;\n            (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n            this.styleObserver = new MutationObserver(() => {\n                const changed = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n                if (changed) {\n                    this.redraw(\"mutation observer\");\n                }\n            });\n            // Observe changes to the source element's style attribute\n            this.styleObserver.observe(sourceElement, { attributeFilter: ['style'] });\n        }\n        // allow tabs to overlay when hidden\n        document.addEventListener('visibilitychange', () => {\n            for (const [_, layoutWindow] of this.props.model.getwindowsMap()) {\n                const layout = layoutWindow.layout;\n                if (layout) {\n                    this.redraw(\"visibility change\");\n                }\n            }\n        });\n    }\n    componentDidUpdate() {\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        if (this.isMainWindow) {\n            if (this.props.model !== this.previousModel) {\n                if (this.previousModel !== undefined) {\n                    this.previousModel.removeChangeListener(this.onModelChange); // stop listening to old model\n                }\n                this.props.model.getwindowsMap().get(this.windowId).layout = this;\n                this.props.model.addChangeListener(this.onModelChange);\n                this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n                this.layoutWindow.layout = this;\n                this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n                this.previousModel = this.props.model;\n                this.tidyMoveablesMap();\n            }\n            this.updateLayoutMetrics();\n        }\n    }\n    componentWillUnmount() {\n        var _a, _b;\n        if (this.selfRef.current) {\n            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n        }\n        (_b = this.styleObserver) === null || _b === void 0 ? void 0 : _b.disconnect();\n    }\n    render() {\n        // console.log(\"render\", this.windowId, this.state.revision, this.renderCount++);\n        // first render will be used to find the size (via selfRef)\n        if (!this.selfRef.current) {\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n                this.renderMetricsElements()));\n        }\n        const model = this.props.model;\n        model.getRoot(this.windowId).calcMinMaxSize();\n        model.getRoot(this.windowId).setPaths(\"\");\n        model.getBorderSet().setPaths();\n        const inner = this.renderLayout();\n        const outer = this.renderBorders(inner);\n        const tabs = this.renderTabs();\n        const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);\n        let floatingWindows = null;\n        let tabMoveables = null;\n        let tabStamps = null;\n        let metricElements = null;\n        if (this.isMainWindow) {\n            floatingWindows = this.renderWindows();\n            metricElements = this.renderMetricsElements();\n            tabMoveables = this.renderTabMoveables();\n            tabStamps = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"__tabStamps__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS) }, this.renderTabStamps());\n        }\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n            metricElements,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Overlay__WEBPACK_IMPORTED_MODULE_19__.Overlay, { key: \"__overlay__\", layout: this, show: this.state.showOverlay }),\n            outer,\n            reorderedTabs,\n            tabMoveables,\n            tabStamps,\n            this.state.portal,\n            floatingWindows));\n    }\n    renderBorders(inner) {\n        const classMain = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MAIN);\n        const borders = this.props.model.getBorderSet().getBorderMap();\n        if (this.isMainWindow && borders.size > 0) {\n            inner = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef }, inner));\n            const borderSetComponents = new Map();\n            const borderSetContentComponents = new Map();\n            for (const [_, location] of _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.values) {\n                const border = borders.get(location);\n                const showBorder = border && border.isShowing() && (!border.isAutoHide() ||\n                    (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));\n                if (showBorder) {\n                    borderSetComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_14__.BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));\n                    borderSetContentComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTab__WEBPACK_IMPORTED_MODULE_13__.BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));\n                }\n            }\n            const classBorderOuter = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);\n            const classBorderInner = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);\n            if (this.props.model.getBorderSet().getLayoutHorizontal()) {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"column\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n            }\n            else {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"row\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n            }\n        }\n        else { // no borders\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef, style: { position: \"absolute\", top: 0, left: 0, bottom: 0, right: 0, display: \"flex\" } }, inner));\n        }\n    }\n    renderLayout() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Row__WEBPACK_IMPORTED_MODULE_20__.Row, { key: \"__row__\", layout: this, node: this.props.model.getRoot(this.windowId) }),\n            this.renderEdgeIndicators()));\n    }\n    renderEdgeIndicators() {\n        const edges = [];\n        const arrowIcon = this.icons.edgeArrow;\n        if (this.state.showEdges) {\n            const r = this.props.model.getRoot(this.windowId).getRect();\n            const length = edgeRectLength;\n            const width = edgeRectWidth;\n            const offset = edgeRectLength / 2;\n            const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            const radius = 50;\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(180deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(90deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.height / 2 - offset, left: r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(-90deg)\" } }, arrowIcon)));\n        }\n        return edges;\n    }\n    renderWindows() {\n        const floatingWindows = [];\n        if (this.supportsPopout) {\n            const windows = this.props.model.getwindowsMap();\n            let i = 1;\n            for (const [windowId, layoutWindow] of windows) {\n                if (windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PopoutWindow__WEBPACK_IMPORTED_MODULE_17__.PopoutWindow, { key: windowId, layout: this, title: this.popoutWindowName + \" \" + i, layoutWindow: layoutWindow, url: this.popoutURL + \"?id=\" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: this.props.popoutClassName },\n                            react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this })))));\n                    i++;\n                }\n            }\n        }\n        return floatingWindows;\n    }\n    renderTabMoveables() {\n        const tabMoveables = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const element = this.getMoveableElement(child.getId());\n                child.setMoveableElement(element);\n                const selected = child.isSelected();\n                const rect = child.getParent().getContentRect();\n                // only render first time if size >0\n                const renderTab = child.isRendered() ||\n                    ((selected || !child.isEnableRenderOnDemand()) && (rect.width > 0 && rect.height > 0));\n                if (renderTab) {\n                    //  console.log(\"rendertab\", child.getName(), this.props.renderRevision);\n                    const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : \"\");\n                    tabMoveables.push((0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SizeTracker__WEBPACK_IMPORTED_MODULE_24__.SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key: key },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__.ErrorBoundary, { message: this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Error_rendering_component) }, this.props.factory(child))), element, key));\n                    child.setRendered(renderTab);\n                }\n            }\n        });\n        return tabMoveables;\n    }\n    renderTabStamps() {\n        const tabStamps = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                // what the tab should look like when dragged (since images need to have been loaded before drag image can be taken)\n                tabStamps.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_DragContainer__WEBPACK_IMPORTED_MODULE_15__.DragContainer, { key: child.getId(), layout: this, node: child }));\n            }\n        });\n        return tabStamps;\n    }\n    renderTabs() {\n        const tabs = new Map();\n        this.props.model.visitWindowNodes(this.windowId, (node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const selected = child.isSelected();\n                const path = child.getPath();\n                const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();\n                if (renderTab) {\n                    // const rect = (child.getParent() as BorderNode | TabSetNode).getContentRect();\n                    // const key = child.getId();\n                    tabs.set(child.getId(), (\n                    // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_21__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: selected })\n                    // </SizeTracker>\n                    ));\n                }\n            }\n        });\n        return tabs;\n    }\n    renderMetricsElements() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\"));\n    }\n    checkForBorderToShow(x, y) {\n        const r = this.getBoundingClientRect(this.mainRef.current);\n        const c = r.getCenter();\n        const margin = edgeRectWidth;\n        const offset = edgeRectLength / 2;\n        let overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_3__.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        let location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    }\n    tidyMoveablesMap() {\n        // console.log(\"tidyMoveablesMap\");\n        const tabs = new Map();\n        this.props.model.visitNodes((node, _) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                tabs.set(node.getId(), node);\n            }\n        });\n        for (const [nodeId, element] of this.moveableElementMap) {\n            if (!tabs.has(nodeId)) {\n                // console.log(\"delete\", nodeId);\n                element.remove(); // remove from dom\n                this.moveableElementMap.delete(nodeId); // remove map entry \n            }\n        }\n    }\n    reorderComponents(components, ids) {\n        const nextIds = [];\n        const nextIdsSet = new Set();\n        let reordered = [];\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        for (const id of ids) {\n            if (components.get(id)) {\n                nextIds.push(id);\n                nextIdsSet.add(id);\n            }\n        }\n        ids.splice(0, ids.length, ...nextIds);\n        // Add tabs that have been added to the DOM\n        for (const [id, _] of components) {\n            if (!nextIdsSet.has(id)) {\n                ids.push(id);\n            }\n        }\n        reordered = ids.map((id) => {\n            return components.get(id);\n        });\n        return reordered;\n    }\n    redraw(type) {\n        // console.log(\"redraw\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { forceRevision: state.forceRevision + 1 }; });\n    }\n    redrawInternal(type) {\n        // console.log(\"redrawInternal\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { layoutRevision: state.layoutRevision + 1 }; });\n    }\n    doAction(action) {\n        if (this.props.onAction !== undefined) {\n            const 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    getBoundingClientRect(div) {\n        const layoutRect = this.getDomRect();\n        if (layoutRect) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.getBoundingClientRect(div).relativeTo(layoutRect);\n        }\n        return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n    }\n    getMoveableContainer() {\n        return this.moveablesRef.current;\n    }\n    getMoveableElement(id) {\n        let moveableElement = this.moveableElementMap.get(id);\n        if (moveableElement === undefined) {\n            moveableElement = document.createElement(\"div\");\n            this.moveablesRef.current.appendChild(moveableElement);\n            moveableElement.className = _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_MOVEABLE;\n            this.moveableElementMap.set(id, moveableElement);\n        }\n        return moveableElement;\n    }\n    getMainLayout() {\n        return this.mainLayout;\n    }\n    getCurrentDocument() {\n        return this.currentDocument;\n    }\n    getDomRect() {\n        if (this.selfRef.current) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());\n        }\n        else {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n        }\n    }\n    getWindowId() {\n        return this.windowId;\n    }\n    getRootDiv() {\n        return this.selfRef.current;\n    }\n    getMainElement() {\n        return this.mainRef.current;\n    }\n    getFactory() {\n        return this.props.factory;\n    }\n    isSupportsPopout() {\n        return this.supportsPopout;\n    }\n    isRealtimeResize() {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    }\n    getPopoutURL() {\n        return this.popoutURL;\n    }\n    setEditingTab(tabNode) {\n        this.setState({ editingTab: tabNode });\n    }\n    getEditingTab() {\n        return this.state.editingTab;\n    }\n    getModel() {\n        return this.props.model;\n    }\n    getScreenRect(inRect) {\n        const rect = inRect.clone();\n        const layoutRect = this.getDomRect();\n        // Note: outerHeight can be less than innerHeight when window is zoomed, so cannot use\n        // const navHeight = Math.min(65, this.currentWindow!.outerHeight - this.currentWindow!.innerHeight);\n        // const navWidth = Math.min(65, this.currentWindow!.outerWidth - this.currentWindow!.innerWidth);\n        const navHeight = 60;\n        const navWidth = 2;\n        // console.log(rect.y, this.currentWindow!.screenX,layoutRect.y);\n        rect.x = this.currentWindow.screenX + this.currentWindow.scrollX + navWidth / 2 + layoutRect.x + rect.x;\n        rect.y = this.currentWindow.screenY + this.currentWindow.scrollY + (navHeight - navWidth / 2) + layoutRect.y + rect.y;\n        rect.height += navHeight;\n        rect.width += navWidth;\n        return rect;\n    }\n    addTabToTabSet(tabsetId, json) {\n        const tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    addTabToActiveTabSet(json) {\n        const tabsetNode = this.props.model.getActiveTabset(this.windowId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    maximize(tabsetNode) {\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));\n    }\n    customizeTab(tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    }\n    customizeTabSet(tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    }\n    i18nName(id, param) {\n        let 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    getShowOverflowMenu() {\n        return this.props.onShowOverflowMenu;\n    }\n    getTabSetPlaceHolderCallback() {\n        return this.props.onTabSetPlaceHolder;\n    }\n    showContextMenu(node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    }\n    auxMouseClick(node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    }\n    showOverlay(show) {\n        this.setState({ showOverlay: show });\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.enablePointerOnIFrames)(!show, this.currentDocument);\n    }\n    // *************************** Start Drag Drop *************************************\n    addTabWithDragAndDrop(event, json, onDrop) {\n        const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(json, this.props.model, false);\n        LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Add, tempNode, json, onDrop);\n    }\n    moveTabWithDragAndDrop(event, node) {\n        this.setDragNode(event, node);\n    }\n    setDragComponent(event, component, x, y) {\n        let dragElement = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { position: \"unset\" }, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__DRAG_RECT) }, component));\n        const tempDiv = this.currentDocument.createElement('div');\n        tempDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n        tempDiv.style.position = \"absolute\";\n        tempDiv.style.left = \"-10000px\";\n        tempDiv.style.top = \"-10000px\";\n        this.currentDocument.body.appendChild(tempDiv);\n        (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(tempDiv).render(dragElement);\n        event.dataTransfer.setDragImage(tempDiv, x, y);\n        setTimeout(() => {\n            this.currentDocument.body.removeChild(tempDiv);\n        }, 0);\n    }\n    setDraggingOverWindow(overWindow) {\n        // console.log(\"setDraggingOverWindow\", overWindow);\n        if (this.isDraggingOverWindow !== overWindow) {\n            if (this.outlineDiv) {\n                this.outlineDiv.style.visibility = overWindow ? \"hidden\" : \"visible\";\n            }\n            if (overWindow) {\n                this.setState({ showEdges: false });\n            }\n            else {\n                // add edge indicators\n                if (this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n            }\n            this.isDraggingOverWindow = overWindow;\n        }\n    }\n    clearDragMain() {\n        // console.log(\"clear drag main\");\n        LayoutInternal.dragState = undefined;\n        if (this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n            this.isDraggingOverWindow = false;\n        }\n        for (const [, layoutWindow] of this.props.model.getwindowsMap()) {\n            // console.log(layoutWindow);\n            layoutWindow.layout.clearDragLocal();\n        }\n    }\n    clearDragLocal() {\n        // console.log(\"clear drag local\", this.windowId);\n        this.setState({ showEdges: false });\n        this.showOverlay(false);\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        if (this.outlineDiv) {\n            this.selfRef.current.removeChild(this.outlineDiv);\n            this.outlineDiv = undefined;\n        }\n    }\n}\nLayoutInternal.dragState = undefined;\nconst FlexLayoutVersion = \"0.8.7\";\nconst defaultIcons = {\n    close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.PopoutIcon, null),\n    maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.MaximizeIcon, null),\n    restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.RestoreIcon, null),\n    more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.OverflowIcon, null),\n    edgeArrow: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.EdgeIcon, null),\n    activeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.AsterickIcon, null)\n};\nvar DragSource;\n(function (DragSource) {\n    DragSource[\"Internal\"] = \"internal\";\n    DragSource[\"External\"] = \"external\";\n    DragSource[\"Add\"] = \"add\";\n})(DragSource || (DragSource = {}));\n/** @internal */\nconst defaultSupportsPopout = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isDesktop)();\n/** @internal */\nconst edgeRectLength = 100;\n/** @internal */\nconst edgeRectWidth = 10;\n// global layout drag state\nclass DragState {\n    constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {\n        this.mainLayout = mainLayout;\n        this.dragSource = dragSource;\n        this.dragNode = dragNode;\n        this.dragJson = dragJson;\n        this.fnNewNodeDropped = fnNewNodeDropped;\n    }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   FlexLayoutVersion: () => (/* binding */ FlexLayoutVersion),\n/* harmony export */   Layout: () => (/* binding */ Layout),\n/* harmony export */   LayoutInternal: () => (/* binding */ LayoutInternal)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/client.js\");\n/* harmony import */ var _DockLocation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\n/* harmony import */ var _model_Model__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../model/Model */ \"./src/model/Model.ts\");\n/* harmony import */ var _model_TabNode__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\n/* harmony import */ var _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\n/* harmony import */ var _BorderTab__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./BorderTab */ \"./src/view/BorderTab.tsx\");\n/* harmony import */ var _BorderTabSet__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\n/* harmony import */ var _DragContainer__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./DragContainer */ \"./src/view/DragContainer.tsx\");\n/* harmony import */ var _ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\n/* harmony import */ var _PopoutWindow__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./PopoutWindow */ \"./src/view/PopoutWindow.tsx\");\n/* harmony import */ var _Icons__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\n/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Overlay */ \"./src/view/Overlay.tsx\");\n/* harmony import */ var _Row__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./Row */ \"./src/view/Row.tsx\");\n/* harmony import */ var _Tab__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/* harmony import */ var _SizeTracker__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./SizeTracker */ \"./src/view/SizeTracker.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * A React component that hosts a multi-tabbed layout\n */\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    /** @internal */\n    constructor(props) {\n        super(props);\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.revision = 0;\n    }\n    /** re-render the layout */\n    redraw() {\n        this.selfRef.current.redraw(\"parent \" + this.revision);\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     * @returns the added tab node or undefined\n     */\n    addTabToTabSet(tabsetId, json) {\n        return this.selfRef.current.addTabToTabSet(tabsetId, json);\n    }\n    /**\n     * Adds a new tab by dragging an item to the drop location, must be called from within an HTML\n     * drag start handler. You can use the setDragComponent() method to set the drag image before calling this\n     * method.\n     * @param event the drag start event\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete\n     */\n    addTabWithDragAndDrop(event, json, onDrop) {\n        this.selfRef.current.addTabWithDragAndDrop(event, json, onDrop);\n    }\n    /**\n     * Move a tab/tabset using drag and drop, must be called from within an HTML\n     * drag start handler\n     * @param event the drag start event\n     * @param node the tab or tabset to drag\n     */\n    moveTabWithDragAndDrop(event, node) {\n        this.selfRef.current.moveTabWithDragAndDrop(event, node);\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     * @returns the added tab node or undefined\n     */\n    addTabToActiveTabSet(json) {\n        return this.selfRef.current.addTabToActiveTabSet(json);\n    }\n    /**\n     * Sets the drag image from a react component for a drag event\n     * @param event the drag event\n     * @param component the react component to be used for the drag image\n     * @param x the x position of the drag cursor on the image\n     * @param y the x position of the drag cursor on the image\n     */\n    setDragComponent(event, component, x, y) {\n        this.selfRef.current.setDragComponent(event, component, x, y);\n    }\n    /** Get the root div element of the layout */\n    getRootDiv() {\n        return this.selfRef.current.getRootDiv();\n    }\n    /** @internal */\n    render() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({ ref: this.selfRef }, this.props, { renderRevision: this.revision++ })));\n    }\n}\n/** @internal */\nclass LayoutInternal extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n    // private renderCount: any;\n    constructor(props) {\n        super(props);\n        this.moveableElementMap = new Map();\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        this.updateLayoutMetrics = () => {\n            if (this.findBorderBarSizeRef.current) {\n                const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== this.state.calculatedBorderBarSize) {\n                    this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        this.onModelChange = (action) => {\n            this.redrawInternal(\"model change\");\n            if (this.props.onModelChange) {\n                this.props.onModelChange(this.props.model, action);\n            }\n        };\n        this.updateRect = () => {\n            const rect = this.getDomRect();\n            if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                // console.log(\"updateRect\", rect.floor());\n                this.setState({ rect });\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    this.redrawInternal(\"rect updated\");\n                }\n            }\n        };\n        this.getClassName = (defaultClassName) => {\n            if (this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return this.props.classNameMapper(defaultClassName);\n            }\n        };\n        this.onCloseWindow = (windowLayout) => {\n            this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.closeWindow(windowLayout.windowId));\n        };\n        this.onSetWindow = (windowLayout, window) => {\n        };\n        this.showControlInPortal = (control, element) => {\n            const portal = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(control, element);\n            this.setState({ portal });\n        };\n        this.hideControlInPortal = () => {\n            this.setState({ portal: undefined });\n        };\n        this.getIcons = () => {\n            return this.icons;\n        };\n        this.setDragNode = (event, node) => {\n            LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Internal, node, undefined, undefined);\n            // Note: can only set (very) limited types on android! so cannot set json\n            // Note: must set text/plain for android to allow drag, \n            //  so just set a simple message indicating its a flexlayout drag (this is not used anywhere else)\n            event.dataTransfer.setData('text/plain', \"--flexlayout--\");\n            event.dataTransfer.effectAllowed = \"copyMove\";\n            event.dataTransfer.dropEffect = \"move\";\n            this.dragEnterCount = 0;\n            if (node instanceof _model_TabSetNode__WEBPACK_IMPORTED_MODULE_12__.TabSetNode) {\n                let rendered = false;\n                let content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabset);\n                if (node.getChildren().length > 0) {\n                    content = this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Move_Tabs).replace(\"?\", String(node.getChildren().length));\n                }\n                if (this.props.onRenderDragRect) {\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, 10, 10);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    this.setDragComponent(event, content, 10, 10);\n                }\n            }\n            else {\n                const element = event.target;\n                const rect = element.getBoundingClientRect();\n                const offsetX = event.clientX - rect.left;\n                const offsetY = event.clientY - rect.top;\n                const parentNode = node === null || node === void 0 ? void 0 : node.getParent();\n                const isInVerticalBorder = parentNode instanceof _model_BorderNode__WEBPACK_IMPORTED_MODULE_9__.BorderNode && parentNode.getOrientation() === _Orientation__WEBPACK_IMPORTED_MODULE_5__.Orientation.HORZ;\n                const x = isInVerticalBorder ? 10 : offsetX;\n                const y = isInVerticalBorder ? 10 : offsetY;\n                let rendered = false;\n                if (this.props.onRenderDragRect) {\n                    const content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { key: node.getId(), layout: this, node: node });\n                    const dragComponent = this.props.onRenderDragRect(content, node, undefined);\n                    if (dragComponent) {\n                        this.setDragComponent(event, dragComponent, x, y);\n                        rendered = true;\n                    }\n                }\n                if (!rendered) {\n                    if ((0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isSafari)()) { // safari doesnt render the offscreen tabstamps\n                        this.setDragComponent(event, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_23__.TabButtonStamp, { node: node, layout: this }), x, y);\n                    }\n                    else {\n                        event.dataTransfer.setDragImage(node.getTabStamp(), x, y);\n                    }\n                }\n            }\n        };\n        this.onDragEnterRaw = (event) => {\n            this.dragEnterCount++;\n            if (this.dragEnterCount === 1) {\n                this.onDragEnter(event);\n            }\n        };\n        this.onDragLeaveRaw = (event) => {\n            this.dragEnterCount--;\n            if (this.dragEnterCount === 0) {\n                this.onDragLeave(event);\n            }\n        };\n        this.onDragEnter = (event) => {\n            // console.log(\"onDragEnter\", this.windowId, this.dragEnterCount);\n            var _a;\n            if (!LayoutInternal.dragState && this.props.onExternalDrag) { // not internal dragging\n                const externalDrag = this.props.onExternalDrag(event);\n                if (externalDrag) {\n                    const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(externalDrag.json, this.props.model, false);\n                    LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.External, tempNode, externalDrag.json, externalDrag.onDrop);\n                }\n            }\n            if (LayoutInternal.dragState) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID && LayoutInternal.dragState.mainLayout === this.mainLayout) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);\n                }\n                if (LayoutInternal.dragState.mainLayout !== this.mainLayout) {\n                    return; // drag not by this layout or its popouts\n                }\n                event.preventDefault();\n                this.dropInfo = undefined;\n                const rootdiv = this.selfRef.current;\n                this.outlineDiv = this.currentDocument.createElement(\"div\");\n                this.outlineDiv.className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n                this.outlineDiv.style.visibility = \"hidden\";\n                const speed = this.props.model.getAttribute(\"tabDragSpeed\");\n                this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;\n                rootdiv.appendChild(this.outlineDiv);\n                this.dragging = true;\n                this.showOverlay(true);\n                // add edge indicators\n                if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const r = new _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect(event.clientX - (clientRect.left), event.clientY - (clientRect.top), 1, 1);\n                r.positionElement(this.outlineDiv);\n            }\n        };\n        this.onDragOver = (event) => {\n            var _a, _b, _c;\n            if (this.dragging && !this.isDraggingOverWindow) {\n                // console.log(\"onDragOver\");\n                event.preventDefault();\n                const clientRect = (_a = this.selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n                const pos = {\n                    x: event.clientX - ((_b = clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) !== null && _b !== void 0 ? _b : 0),\n                    y: event.clientY - ((_c = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) !== null && _c !== void 0 ? _c : 0),\n                };\n                this.checkForBorderToShow(pos.x, pos.y);\n                let dropInfo = this.props.model.findDropTargetNode(this.windowId, LayoutInternal.dragState.dragNode, pos.x, pos.y);\n                if (dropInfo) {\n                    this.dropInfo = dropInfo;\n                    if (this.outlineDiv) {\n                        this.outlineDiv.className = this.getClassName(dropInfo.className);\n                        dropInfo.rect.positionElement(this.outlineDiv);\n                        this.outlineDiv.style.visibility = \"visible\";\n                    }\n                }\n            }\n        };\n        this.onDragLeave = (event) => {\n            // console.log(\"onDragLeave\", this.windowId, this.dragging);\n            if (this.dragging) {\n                if (this.windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);\n                }\n                this.clearDragLocal();\n            }\n        };\n        this.onDrop = (event) => {\n            // console.log(\"ondrop\", this.windowId, this.dragging, Layout.dragState);\n            if (this.dragging) {\n                event.preventDefault();\n                const dragState = LayoutInternal.dragState;\n                if (this.dropInfo) {\n                    if (dragState.dragJson !== undefined) {\n                        const newNode = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                        if (dragState.fnNewNodeDropped !== undefined) {\n                            dragState.fnNewNodeDropped(newNode, event);\n                        }\n                    }\n                    else if (dragState.dragNode !== undefined) {\n                        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));\n                    }\n                }\n                this.mainLayout.clearDragMain();\n            }\n            this.dragEnterCount = 0; // must set to zero here ref sublayouts\n        };\n        this.orderedIds = [];\n        this.selfRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.moveablesRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.mainRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.findBorderBarSizeRef = react__WEBPACK_IMPORTED_MODULE_0__.createRef();\n        this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        this.icons = Object.assign(Object.assign({}, defaultIcons), props.icons);\n        this.windowId = props.windowId ? props.windowId : _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n        this.mainLayout = this.props.mainLayout ? this.props.mainLayout : this;\n        this.isDraggingOverWindow = false;\n        this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n        this.layoutWindow.layout = this;\n        this.popoutWindowName = this.props.popoutWindowName || \"Popout Window\";\n        // this.renderCount = 0;\n        this.state = {\n            rect: _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty(),\n            editingTab: undefined,\n            showEdges: false,\n            showOverlay: false,\n            calculatedBorderBarSize: 29,\n            layoutRevision: 0,\n            forceRevision: 0,\n            showHiddenBorder: _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER\n        };\n        this.isMainWindow = this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID;\n    }\n    componentDidMount() {\n        this.updateRect();\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.layoutWindow.window = this.currentWindow;\n        this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n        this.resizeObserver = new ResizeObserver(entries => {\n            requestAnimationFrame(() => {\n                this.updateRect();\n            });\n        });\n        if (this.selfRef.current) {\n            this.resizeObserver.observe(this.selfRef.current);\n        }\n        if (this.isMainWindow) {\n            this.props.model.addChangeListener(this.onModelChange);\n            this.updateLayoutMetrics();\n        }\n        else {\n            // since resizeObserver doesn't always work as expected when observing element in another document\n            this.currentWindow.addEventListener(\"resize\", () => {\n                this.updateRect();\n            });\n            const sourceElement = this.props.mainLayout.getRootDiv();\n            const targetElement = this.selfRef.current;\n            (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n            this.styleObserver = new MutationObserver(() => {\n                const changed = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.copyInlineStyles)(sourceElement, targetElement);\n                if (changed) {\n                    this.redraw(\"mutation observer\");\n                }\n            });\n            // Observe changes to the source element's style attribute\n            this.styleObserver.observe(sourceElement, { attributeFilter: ['style'] });\n        }\n        // allow tabs to overlay when hidden\n        document.addEventListener('visibilitychange', () => {\n            for (const [_, layoutWindow] of this.props.model.getwindowsMap()) {\n                const layout = layoutWindow.layout;\n                if (layout) {\n                    this.redraw(\"visibility change\");\n                }\n            }\n        });\n    }\n    componentDidUpdate() {\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        if (this.isMainWindow) {\n            if (this.props.model !== this.previousModel) {\n                if (this.previousModel !== undefined) {\n                    this.previousModel.removeChangeListener(this.onModelChange); // stop listening to old model\n                }\n                this.props.model.getwindowsMap().get(this.windowId).layout = this;\n                this.props.model.addChangeListener(this.onModelChange);\n                this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);\n                this.layoutWindow.layout = this;\n                this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);\n                this.previousModel = this.props.model;\n                this.tidyMoveablesMap();\n            }\n            this.updateLayoutMetrics();\n        }\n    }\n    componentWillUnmount() {\n        var _a, _b;\n        if (this.selfRef.current) {\n            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n        }\n        (_b = this.styleObserver) === null || _b === void 0 ? void 0 : _b.disconnect();\n    }\n    render() {\n        // console.log(\"render\", this.windowId, this.state.revision, this.renderCount++);\n        // first render will be used to find the size (via selfRef)\n        if (!this.selfRef.current) {\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n                this.renderMetricsElements()));\n        }\n        const model = this.props.model;\n        model.getRoot(this.windowId).calcMinMaxSize();\n        model.getRoot(this.windowId).setPaths(\"\");\n        model.getBorderSet().setPaths();\n        const inner = this.renderLayout();\n        const outer = this.renderBorders(inner);\n        const tabs = this.renderTabs();\n        const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);\n        let floatingWindows = null;\n        let tabMoveables = null;\n        let tabStamps = null;\n        let metricElements = null;\n        if (this.isMainWindow) {\n            floatingWindows = this.renderWindows();\n            metricElements = this.renderMetricsElements();\n            tabMoveables = this.renderTabMoveables();\n            tabStamps = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"__tabStamps__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS) }, this.renderTabStamps());\n        }\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.onDragEnterRaw, onDragLeave: this.onDragLeaveRaw, onDragOver: this.onDragOver, onDrop: this.onDrop },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: this.moveablesRef, key: \"__moveables__\", className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES) }),\n            metricElements,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Overlay__WEBPACK_IMPORTED_MODULE_19__.Overlay, { key: \"__overlay__\", layout: this, show: this.state.showOverlay }),\n            outer,\n            reorderedTabs,\n            tabMoveables,\n            tabStamps,\n            this.state.portal,\n            floatingWindows));\n    }\n    renderBorders(inner) {\n        const classMain = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_MAIN);\n        const borders = this.props.model.getBorderSet().getBorderMap();\n        if (this.isMainWindow && borders.size > 0) {\n            inner = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef }, inner));\n            const borderSetComponents = new Map();\n            const borderSetContentComponents = new Map();\n            for (const [_, location] of _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.values) {\n                const border = borders.get(location);\n                const showBorder = border && border.isShowing() && (!border.isAutoHide() ||\n                    (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));\n                if (showBorder) {\n                    borderSetComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTabSet__WEBPACK_IMPORTED_MODULE_14__.BorderTabSet, { layout: this, border: border, size: this.state.calculatedBorderBarSize }));\n                    borderSetContentComponents.set(location, react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderTab__WEBPACK_IMPORTED_MODULE_13__.BorderTab, { layout: this, border: border, show: border.getSelected() !== -1 }));\n                }\n            }\n            const classBorderOuter = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER);\n            const classBorderInner = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER);\n            if (this.props.model.getBorderSet().getLayoutHorizontal()) {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"column\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)));\n            }\n            else {\n                const innerWithBorderTabs = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"row\" } },\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        inner,\n                        borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetContentComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n                return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderOuter, style: { flexDirection: \"row\" } },\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT),\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classBorderInner, style: { flexDirection: \"column\" } },\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP),\n                        innerWithBorderTabs,\n                        borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM)),\n                    borderSetComponents.get(_DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT)));\n            }\n        }\n        else { // no borders\n            return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classMain, ref: this.mainRef, style: { position: \"absolute\", top: 0, left: 0, bottom: 0, right: 0, display: \"flex\" } }, inner));\n        }\n    }\n    renderLayout() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Row__WEBPACK_IMPORTED_MODULE_20__.Row, { key: \"__row__\", layout: this, node: this.props.model.getRoot(this.windowId) }),\n            this.renderEdgeIndicators()));\n    }\n    renderEdgeIndicators() {\n        const edges = [];\n        const arrowIcon = this.icons.edgeArrow;\n        if (this.state.showEdges) {\n            const r = this.props.model.getRoot(this.windowId).getRect();\n            const length = edgeRectLength;\n            const width = edgeRectWidth;\n            const offset = edgeRectLength / 2;\n            const className = this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            const radius = 50;\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"North\", style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_TOP) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(180deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"West\", style: { top: r.height / 2 - offset, left: 0, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(90deg)\" } }, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"South\", style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null, arrowIcon)));\n            edges.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"East\", style: { top: r.height / 2 - offset, left: r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT) },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { transform: \"rotate(-90deg)\" } }, arrowIcon)));\n        }\n        return edges;\n    }\n    renderWindows() {\n        const floatingWindows = [];\n        if (this.supportsPopout) {\n            const windows = this.props.model.getwindowsMap();\n            let i = 1;\n            for (const [windowId, layoutWindow] of windows) {\n                if (windowId !== _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n                    floatingWindows.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PopoutWindow__WEBPACK_IMPORTED_MODULE_17__.PopoutWindow, { key: windowId, layout: this, title: this.popoutWindowName + \" \" + i, layoutWindow: layoutWindow, url: this.popoutURL + \"?id=\" + windowId, onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: this.props.popoutClassName },\n                            react__WEBPACK_IMPORTED_MODULE_0__.createElement(LayoutInternal, Object.assign({}, this.props, { windowId: windowId, mainLayout: this })))));\n                    i++;\n                }\n            }\n        }\n        return floatingWindows;\n    }\n    renderTabMoveables() {\n        const tabMoveables = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const element = this.getMoveableElement(child.getId());\n                child.setMoveableElement(element);\n                const selected = child.isSelected();\n                const rect = child.getParent().getContentRect();\n                // only render first time if size >0\n                const renderTab = child.isRendered() ||\n                    ((selected || !child.isEnableRenderOnDemand()) && (rect.width > 0 && rect.height > 0));\n                if (renderTab) {\n                    //  console.log(\"rendertab\", child.getName(), this.props.renderRevision);\n                    const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : \"\");\n                    tabMoveables.push((0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_SizeTracker__WEBPACK_IMPORTED_MODULE_24__.SizeTracker, { rect: rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key: key },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ErrorBoundary__WEBPACK_IMPORTED_MODULE_16__.ErrorBoundary, { message: this.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_4__.I18nLabel.Error_rendering_component) }, this.props.factory(child))), element, key));\n                    child.setRendered(renderTab);\n                }\n            }\n        });\n        return tabMoveables;\n    }\n    renderTabStamps() {\n        const tabStamps = [];\n        this.props.model.visitNodes((node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                // what the tab should look like when dragged (since images need to have been loaded before drag image can be taken)\n                tabStamps.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_DragContainer__WEBPACK_IMPORTED_MODULE_15__.DragContainer, { key: child.getId(), layout: this, node: child }));\n            }\n        });\n        return tabStamps;\n    }\n    renderTabs() {\n        const tabs = new Map();\n        this.props.model.visitWindowNodes(this.windowId, (node) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                const child = node;\n                const selected = child.isSelected();\n                const path = child.getPath();\n                const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();\n                if (renderTab) {\n                    // const rect = (child.getParent() as BorderNode | TabSetNode).getContentRect();\n                    // const key = child.getId();\n                    tabs.set(child.getId(), (\n                    // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tab__WEBPACK_IMPORTED_MODULE_21__.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: selected })\n                    // </SizeTracker>\n                    ));\n                }\n            }\n        });\n        return tabs;\n    }\n    renderMetricsElements() {\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\"));\n    }\n    checkForBorderToShow(x, y) {\n        const r = this.getBoundingClientRect(this.mainRef.current);\n        const c = r.getCenter();\n        const margin = edgeRectWidth;\n        const offset = edgeRectLength / 2;\n        let overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === _DockLocation__WEBPACK_IMPORTED_MODULE_3__.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        let location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    }\n    tidyMoveablesMap() {\n        // console.log(\"tidyMoveablesMap\");\n        const tabs = new Map();\n        this.props.model.visitNodes((node, _) => {\n            if (node instanceof _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode) {\n                tabs.set(node.getId(), node);\n            }\n        });\n        for (const [nodeId, element] of this.moveableElementMap) {\n            if (!tabs.has(nodeId)) {\n                // console.log(\"delete\", nodeId);\n                element.remove(); // remove from dom\n                this.moveableElementMap.delete(nodeId); // remove map entry \n            }\n        }\n    }\n    reorderComponents(components, ids) {\n        const nextIds = [];\n        const nextIdsSet = new Set();\n        let reordered = [];\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        for (const id of ids) {\n            if (components.get(id)) {\n                nextIds.push(id);\n                nextIdsSet.add(id);\n            }\n        }\n        ids.splice(0, ids.length, ...nextIds);\n        // Add tabs that have been added to the DOM\n        for (const [id, _] of components) {\n            if (!nextIdsSet.has(id)) {\n                ids.push(id);\n            }\n        }\n        reordered = ids.map((id) => {\n            return components.get(id);\n        });\n        return reordered;\n    }\n    redraw(type) {\n        // console.log(\"redraw\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { forceRevision: state.forceRevision + 1 }; });\n    }\n    redrawInternal(type) {\n        // console.log(\"redrawInternal\", this.windowId, type);\n        this.mainLayout.setState((state, props) => { return { layoutRevision: state.layoutRevision + 1 }; });\n    }\n    doAction(action) {\n        if (this.props.onAction !== undefined) {\n            const 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    getBoundingClientRect(div) {\n        const layoutRect = this.getDomRect();\n        if (layoutRect) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.getBoundingClientRect(div).relativeTo(layoutRect);\n        }\n        return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n    }\n    getMoveableContainer() {\n        return this.moveablesRef.current;\n    }\n    getMoveableElement(id) {\n        let moveableElement = this.moveableElementMap.get(id);\n        if (moveableElement === undefined) {\n            moveableElement = document.createElement(\"div\");\n            this.moveablesRef.current.appendChild(moveableElement);\n            moveableElement.className = _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_MOVEABLE;\n            this.moveableElementMap.set(id, moveableElement);\n        }\n        return moveableElement;\n    }\n    getMainLayout() {\n        return this.mainLayout;\n    }\n    getCurrentDocument() {\n        return this.currentDocument;\n    }\n    getDomRect() {\n        if (this.selfRef.current) {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());\n        }\n        else {\n            return _Rect__WEBPACK_IMPORTED_MODULE_6__.Rect.empty();\n        }\n    }\n    getWindowId() {\n        return this.windowId;\n    }\n    getRootDiv() {\n        return this.selfRef.current;\n    }\n    getMainElement() {\n        return this.mainRef.current;\n    }\n    getFactory() {\n        return this.props.factory;\n    }\n    isSupportsPopout() {\n        return this.supportsPopout;\n    }\n    isRealtimeResize() {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    }\n    getPopoutURL() {\n        return this.popoutURL;\n    }\n    setEditingTab(tabNode) {\n        this.setState({ editingTab: tabNode });\n    }\n    getEditingTab() {\n        return this.state.editingTab;\n    }\n    getModel() {\n        return this.props.model;\n    }\n    getScreenRect(inRect) {\n        const rect = inRect.clone();\n        const layoutRect = this.getDomRect();\n        // Note: outerHeight can be less than innerHeight when window is zoomed, so cannot use\n        // const navHeight = Math.min(65, this.currentWindow!.outerHeight - this.currentWindow!.innerHeight);\n        // const navWidth = Math.min(65, this.currentWindow!.outerWidth - this.currentWindow!.innerWidth);\n        const navHeight = 60;\n        const navWidth = 2;\n        // console.log(rect.y, this.currentWindow!.screenX,layoutRect.y);\n        rect.x = this.currentWindow.screenX + this.currentWindow.scrollX + navWidth / 2 + layoutRect.x + rect.x;\n        rect.y = this.currentWindow.screenY + this.currentWindow.scrollY + (navHeight - navWidth / 2) + layoutRect.y + rect.y;\n        rect.height += navHeight;\n        rect.width += navWidth;\n        return rect;\n    }\n    addTabToTabSet(tabsetId, json) {\n        const tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetId, _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    addTabToActiveTabSet(json) {\n        const tabsetNode = this.props.model.getActiveTabset(this.windowId);\n        if (tabsetNode !== undefined) {\n            const node = this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.addNode(json, tabsetNode.getId(), _DockLocation__WEBPACK_IMPORTED_MODULE_3__.DockLocation.CENTER, -1));\n            return node;\n        }\n        return undefined;\n    }\n    maximize(tabsetNode) {\n        this.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_8__.Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));\n    }\n    customizeTab(tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    }\n    customizeTabSet(tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    }\n    i18nName(id, param) {\n        let 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    getShowOverflowMenu() {\n        return this.props.onShowOverflowMenu;\n    }\n    getTabSetPlaceHolderCallback() {\n        return this.props.onTabSetPlaceHolder;\n    }\n    showContextMenu(node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    }\n    auxMouseClick(node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    }\n    showOverlay(show) {\n        this.setState({ showOverlay: show });\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.enablePointerOnIFrames)(!show, this.currentDocument);\n    }\n    // *************************** Start Drag Drop *************************************\n    addTabWithDragAndDrop(event, json, onDrop) {\n        const tempNode = _model_TabNode__WEBPACK_IMPORTED_MODULE_11__.TabNode.fromJson(json, this.props.model, false);\n        LayoutInternal.dragState = new DragState(this.mainLayout, DragSource.Add, tempNode, json, onDrop);\n    }\n    moveTabWithDragAndDrop(event, node) {\n        this.setDragNode(event, node);\n    }\n    setDragComponent(event, component, x, y) {\n        let dragElement = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { position: \"unset\" }, className: this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__LAYOUT) + \" \" + this.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__DRAG_RECT) }, component));\n        const tempDiv = this.currentDocument.createElement('div');\n        tempDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n        tempDiv.style.position = \"absolute\";\n        tempDiv.style.left = \"-10000px\";\n        tempDiv.style.top = \"-10000px\";\n        this.currentDocument.body.appendChild(tempDiv);\n        (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(tempDiv).render(dragElement);\n        event.dataTransfer.setDragImage(tempDiv, x, y);\n        setTimeout(() => {\n            this.currentDocument.body.removeChild(tempDiv);\n        }, 0);\n    }\n    setDraggingOverWindow(overWindow) {\n        // console.log(\"setDraggingOverWindow\", overWindow);\n        if (this.isDraggingOverWindow !== overWindow) {\n            if (this.outlineDiv) {\n                this.outlineDiv.style.visibility = overWindow ? \"hidden\" : \"visible\";\n            }\n            if (overWindow) {\n                this.setState({ showEdges: false });\n            }\n            else {\n                // add edge indicators\n                if (this.props.model.getMaximizedTabset(this.windowId) === undefined) {\n                    this.setState({ showEdges: this.props.model.isEnableEdgeDock() });\n                }\n            }\n            this.isDraggingOverWindow = overWindow;\n        }\n    }\n    clearDragMain() {\n        // console.log(\"clear drag main\");\n        LayoutInternal.dragState = undefined;\n        if (this.windowId === _model_Model__WEBPACK_IMPORTED_MODULE_10__.Model.MAIN_WINDOW_ID) {\n            this.isDraggingOverWindow = false;\n        }\n        for (const [, layoutWindow] of this.props.model.getwindowsMap()) {\n            // console.log(layoutWindow);\n            layoutWindow.layout.clearDragLocal();\n        }\n    }\n    clearDragLocal() {\n        // console.log(\"clear drag local\", this.windowId);\n        this.setState({ showEdges: false });\n        this.showOverlay(false);\n        this.dragEnterCount = 0;\n        this.dragging = false;\n        if (this.outlineDiv) {\n            this.selfRef.current.removeChild(this.outlineDiv);\n            this.outlineDiv = undefined;\n        }\n    }\n}\nLayoutInternal.dragState = undefined;\nconst FlexLayoutVersion = \"0.8.8\";\nconst defaultIcons = {\n    close: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    closeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.CloseIcon, null),\n    popout: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.PopoutIcon, null),\n    maximize: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.MaximizeIcon, null),\n    restore: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.RestoreIcon, null),\n    more: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.OverflowIcon, null),\n    edgeArrow: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.EdgeIcon, null),\n    activeTabset: react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Icons__WEBPACK_IMPORTED_MODULE_18__.AsterickIcon, null)\n};\nvar DragSource;\n(function (DragSource) {\n    DragSource[\"Internal\"] = \"internal\";\n    DragSource[\"External\"] = \"external\";\n    DragSource[\"Add\"] = \"add\";\n})(DragSource || (DragSource = {}));\n/** @internal */\nconst defaultSupportsPopout = (0,_Utils__WEBPACK_IMPORTED_MODULE_22__.isDesktop)();\n/** @internal */\nconst edgeRectLength = 100;\n/** @internal */\nconst edgeRectWidth = 10;\n// global layout drag state\nclass DragState {\n    constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {\n        this.mainLayout = mainLayout;\n        this.dragSource = dragSource;\n        this.dragNode = dragNode;\n        this.dragJson = dragJson;\n        this.fnNewNodeDropped = fnNewNodeDropped;\n    }\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
 
 /***/ }),
 
@@ -396,7 +396,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   showPopup: () => (/* binding */ showPopup)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n\n\n\n/** @internal */\nfunction showPopup(triggerElement, parentNode, items, onSelect, layout) {\n    var _a;\n    const layoutDiv = layout.getRootDiv();\n    const classNameMapper = layout.getClassName;\n    const currentDocument = triggerElement.ownerDocument;\n    const triggerRect = triggerElement.getBoundingClientRect();\n    const layoutRect = (_a = layoutDiv === null || layoutDiv === void 0 ? void 0 : layoutDiv.getBoundingClientRect()) !== null && _a !== void 0 ? _a : new DOMRect(0, 0, 100, 100);\n    const elm = currentDocument.createElement(\"div\");\n    elm.className = classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_1__.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\n    }\n    else {\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\n    }\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\n    }\n    else {\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\n    }\n    layout.showOverlay(true);\n    if (layoutDiv) {\n        layoutDiv.appendChild(elm);\n    }\n    const onHide = () => {\n        layout.hideControlInPortal();\n        layout.showOverlay(false);\n        if (layoutDiv) {\n            layoutDiv.removeChild(elm);\n        }\n        elm.removeEventListener(\"pointerdown\", onElementPointerDown);\n        currentDocument.removeEventListener(\"pointerdown\", onDocPointerDown);\n    };\n    const onElementPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onDocPointerDown = (_event) => {\n        onHide();\n    };\n    elm.addEventListener(\"pointerdown\", onElementPointerDown);\n    currentDocument.addEventListener(\"pointerdown\", onDocPointerDown);\n    layout.showControlInPortal(react__WEBPACK_IMPORTED_MODULE_0__.createElement(PopupMenu, { currentDocument: currentDocument, parentNode: parentNode, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper, layout: layout }), elm);\n}\n/** @internal */\nconst PopupMenu = (props) => {\n    const { parentNode, items, onHide, onSelect, classNameMapper, layout } = props;\n    const onItemClick = (item, event) => {\n        onSelect(item);\n        onHide();\n        event.stopPropagation();\n    };\n    const onDragStart = (event, node) => {\n        event.stopPropagation(); // prevent starting a tabset drag as well\n        layout.setDragNode(event.nativeEvent, node);\n        setTimeout(() => {\n            onHide();\n        }, 0);\n    };\n    const onDragEnd = (event) => {\n        layout.clearDragMain();\n    };\n    const itemElements = items.map((item, i) => {\n        let classes = classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_1__.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM);\n        if (parentNode.getSelected() === item.index) {\n            classes += \" \" + classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_1__.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED);\n        }\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: item.index, className: classes, \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: (event) => onItemClick(item, event), draggable: true, onDragStart: (e) => onDragStart(e, item.node), onDragEnd: onDragEnd, title: item.node.getHelpText() },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_2__.TabButtonStamp, { node: item.node, layout: layout })));\n    });\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_1__.CLASSES.FLEXLAYOUT__POPUP_MENU), \"data-layout-path\": \"/popup-menu\" }, itemElements));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/PopupMenu.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   showPopup: () => (/* binding */ showPopup)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _TabButtonStamp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n\n\n\n\n/** @internal */\nfunction showPopup(triggerElement, parentNode, items, onSelect, layout) {\n    var _a;\n    const layoutDiv = layout.getRootDiv();\n    const classNameMapper = layout.getClassName;\n    const currentDocument = triggerElement.ownerDocument;\n    const triggerRect = triggerElement.getBoundingClientRect();\n    const layoutRect = (_a = layoutDiv === null || layoutDiv === void 0 ? void 0 : layoutDiv.getBoundingClientRect()) !== null && _a !== void 0 ? _a : new DOMRect(0, 0, 100, 100);\n    const elm = currentDocument.createElement(\"div\");\n    elm.className = classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_1__.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\n    }\n    else {\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\n    }\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\n    }\n    else {\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\n    }\n    layout.showOverlay(true);\n    if (layoutDiv) {\n        layoutDiv.appendChild(elm);\n    }\n    const onHide = () => {\n        layout.hideControlInPortal();\n        layout.showOverlay(false);\n        if (layoutDiv) {\n            layoutDiv.removeChild(elm);\n        }\n        elm.removeEventListener(\"pointerdown\", onElementPointerDown);\n        currentDocument.removeEventListener(\"pointerdown\", onDocPointerDown);\n    };\n    const onElementPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onDocPointerDown = (_event) => {\n        onHide();\n    };\n    elm.addEventListener(\"pointerdown\", onElementPointerDown);\n    currentDocument.addEventListener(\"pointerdown\", onDocPointerDown);\n    layout.showControlInPortal(react__WEBPACK_IMPORTED_MODULE_0__.createElement(PopupMenu, { currentDocument: currentDocument, parentNode: parentNode, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper, layout: layout }), elm);\n}\n/** @internal */\nconst PopupMenu = (props) => {\n    const { parentNode, items, onHide, onSelect, classNameMapper, layout } = props;\n    const divRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n        // Set focus when the component mounts\n        if (divRef.current) {\n            divRef.current.focus();\n        }\n    }, []);\n    const onItemClick = (item, event) => {\n        onSelect(item);\n        onHide();\n        event.stopPropagation();\n    };\n    const onDragStart = (event, node) => {\n        event.stopPropagation(); // prevent starting a tabset drag as well\n        layout.setDragNode(event.nativeEvent, node);\n        setTimeout(() => {\n            onHide();\n        }, 0);\n    };\n    const onDragEnd = (event) => {\n        layout.clearDragMain();\n    };\n    const handleKeyDown = (event) => {\n        if (event.key === \"Escape\") {\n            onHide();\n        }\n    };\n    const itemElements = items.map((item, i) => {\n        let classes = classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_1__.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM);\n        if (parentNode.getSelected() === item.index) {\n            classes += \" \" + classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_1__.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED);\n        }\n        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: item.index, className: classes, \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: (event) => onItemClick(item, event), draggable: true, onDragStart: (e) => onDragStart(e, item.node), onDragEnd: onDragEnd, title: item.node.getHelpText() },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButtonStamp__WEBPACK_IMPORTED_MODULE_2__.TabButtonStamp, { node: item.node, layout: layout })));\n    });\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: classNameMapper(_Types__WEBPACK_IMPORTED_MODULE_1__.CLASSES.FLEXLAYOUT__POPUP_MENU), ref: divRef, tabIndex: 0, onKeyDown: handleKeyDown, \"data-layout-path\": \"/popup-menu\" }, itemElements));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/PopupMenu.tsx?");
 
 /***/ }),
 
@@ -466,7 +466,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   useTabOverflow: () => (/* binding */ useTabOverflow)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n/** @internal */\nconst useTabOverflow = (layout, node, orientation, tabStripRef, miniScrollRef, tabClassName) => {\n    const [hiddenTabs, setHiddenTabs] = react__WEBPACK_IMPORTED_MODULE_0__.useState([]);\n    const [isTabOverflow, setTabOverflow] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const userControlledPositionRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n    const updateHiddenTabsTimerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(undefined);\n    const hiddenTabsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef([]);\n    const thumbInternalPos = react__WEBPACK_IMPORTED_MODULE_0__.useRef(0);\n    const repositioningRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n    hiddenTabsRef.current = hiddenTabs;\n    // if node changes (new model) then reset scroll to 0\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n        if (tabStripRef.current) {\n            setScrollPosition(0);\n        }\n    }, [node]);\n    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n        userControlledPositionRef.current = false;\n    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n        checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons\n        if (userControlledPositionRef.current === false) {\n            scrollIntoView();\n        }\n        updateHiddenTabs();\n        updateScrollMetrics();\n    });\n    function scrollIntoView() {\n        const selectedTabNode = node.getSelectedNode();\n        if (selectedTabNode && tabStripRef.current) {\n            const stripRect = layout.getBoundingClientRect(tabStripRef.current);\n            const selectedRect = selectedTabNode.getTabRect();\n            let shift = getNear(stripRect) - getNear(selectedRect);\n            if (shift > 2 || getSize(selectedRect) > getSize(stripRect)) { // maybe 2 will prevent jitter?\n                setScrollPosition(getScrollPosition(tabStripRef.current) - shift);\n                repositioningRef.current = true; // prevent onScroll setting userControlledPosition\n            }\n            else {\n                shift = getFar(selectedRect) - getFar(stripRect);\n                if (shift > 2) {\n                    setScrollPosition(getScrollPosition(tabStripRef.current) + shift);\n                    repositioningRef.current = true;\n                }\n            }\n        }\n    }\n    const updateScrollMetrics = () => {\n        if (tabStripRef.current && miniScrollRef.current) {\n            const t = tabStripRef.current;\n            const s = miniScrollRef.current;\n            const size = getElementSize(t);\n            const scrollSize = getScrollSize(t);\n            const position = getScrollPosition(t);\n            if (scrollSize > size && scrollSize > 0) {\n                let thumbSize = size * size / scrollSize;\n                let adjust = 0;\n                if (thumbSize < 20) {\n                    adjust = 20 - thumbSize;\n                    thumbSize = 20;\n                }\n                const thumbPos = position * (size - adjust) / scrollSize;\n                if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n                    s.style.width = thumbSize + \"px\";\n                    s.style.left = thumbPos + \"px\";\n                }\n                else {\n                    s.style.height = thumbSize + \"px\";\n                    s.style.top = thumbPos + \"px\";\n                }\n                s.style.display = \"block\";\n            }\n            else {\n                s.style.display = \"none\";\n            }\n            if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n                s.style.bottom = \"0px\";\n            }\n            else {\n                s.style.right = \"0px\";\n            }\n        }\n    };\n    const updateHiddenTabs = () => {\n        if (updateHiddenTabsTimerRef.current === undefined) {\n            // throttle updates to prevent Maximum update depth exceeded error\n            updateHiddenTabsTimerRef.current = setTimeout(() => {\n                const newHiddenTabs = findHiddenTabs();\n                if (!arraysEqual(newHiddenTabs, hiddenTabsRef.current)) {\n                    setHiddenTabs(newHiddenTabs);\n                }\n                updateHiddenTabsTimerRef.current = undefined;\n            }, 100);\n        }\n    };\n    const onScroll = () => {\n        if (!repositioningRef.current) {\n            userControlledPositionRef.current = true;\n        }\n        repositioningRef.current = false;\n        updateScrollMetrics();\n        updateHiddenTabs();\n    };\n    const onScrollPointerDown = (event) => {\n        var _a;\n        event.stopPropagation();\n        miniScrollRef.current.setPointerCapture(event.pointerId);\n        const r = (_a = miniScrollRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            thumbInternalPos.current = event.clientX - r.x;\n        }\n        else {\n            thumbInternalPos.current = event.clientY - r.y;\n        }\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_2__.startDrag)(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);\n    };\n    const onDragMove = (x, y) => {\n        if (tabStripRef.current && miniScrollRef.current) {\n            const t = tabStripRef.current;\n            const s = miniScrollRef.current;\n            const size = getElementSize(t);\n            const scrollSize = getScrollSize(t);\n            const thumbSize = getElementSize(s);\n            const r = t.getBoundingClientRect();\n            let thumb = 0;\n            if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n                thumb = x - r.x - thumbInternalPos.current;\n            }\n            else {\n                thumb = y - r.y - thumbInternalPos.current;\n            }\n            thumb = Math.max(0, Math.min(scrollSize - thumbSize, thumb));\n            if (size > 0) {\n                const scrollPos = thumb * scrollSize / size;\n                setScrollPosition(scrollPos);\n            }\n        }\n    };\n    const onDragEnd = () => {\n    };\n    const onDragCancel = () => {\n    };\n    const checkForOverflow = () => {\n        if (tabStripRef.current) {\n            const strip = tabStripRef.current;\n            const tabContainer = strip.firstElementChild;\n            const offset = isTabOverflow ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting\n            const dock = (getElementSize(tabContainer) + offset) > getElementSize(tabStripRef.current);\n            if (dock !== isTabOverflow) {\n                setTabOverflow(dock);\n            }\n        }\n    };\n    const findHiddenTabs = () => {\n        const hidden = [];\n        if (tabStripRef.current) {\n            const strip = tabStripRef.current;\n            const stripRect = strip.getBoundingClientRect();\n            const visibleNear = getNear(stripRect) - 1;\n            const visibleFar = getFar(stripRect) + 1;\n            const tabContainer = strip.firstElementChild;\n            let i = 0;\n            Array.from(tabContainer.children).forEach((child) => {\n                const tabRect = child.getBoundingClientRect();\n                if (child.classList.contains(tabClassName)) {\n                    if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) {\n                        hidden.push(i);\n                    }\n                    i++;\n                }\n            });\n        }\n        return hidden;\n    };\n    const onMouseWheel = (event) => {\n        if (tabStripRef.current) {\n            if (node.getChildren().length === 0)\n                return;\n            let delta = 0;\n            if (Math.abs(event.deltaY) > 0) {\n                delta = -event.deltaY;\n                if (event.deltaMode === 1) {\n                    // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\n                    delta *= 40;\n                }\n                const newPos = getScrollPosition(tabStripRef.current) - delta;\n                const maxScroll = getScrollSize(tabStripRef.current) - getElementSize(tabStripRef.current);\n                const p = Math.max(0, Math.min(maxScroll, newPos));\n                setScrollPosition(p);\n                event.stopPropagation();\n            }\n        }\n    };\n    // orientation helpers:\n    const getNear = (rect) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return rect.x;\n        }\n        else {\n            return rect.y;\n        }\n    };\n    const getFar = (rect) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return rect.right;\n        }\n        else {\n            return rect.bottom;\n        }\n    };\n    const getElementSize = (elm) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return elm.clientWidth;\n        }\n        else {\n            return elm.clientHeight;\n        }\n    };\n    const getSize = (rect) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return rect.width;\n        }\n        else {\n            return rect.height;\n        }\n    };\n    const getScrollSize = (elm) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return elm.scrollWidth;\n        }\n        else {\n            return elm.scrollHeight;\n        }\n    };\n    const setScrollPosition = (p) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            tabStripRef.current.scrollLeft = p;\n        }\n        else {\n            tabStripRef.current.scrollTop = p;\n        }\n    };\n    const getScrollPosition = (elm) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return elm.scrollLeft;\n        }\n        else {\n            return elm.scrollTop;\n        }\n    };\n    return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow };\n};\nfunction arraysEqual(arr1, arr2) {\n    return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]);\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   useTabOverflow: () => (/* binding */ useTabOverflow)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n\n\n\n/** @internal */\nconst useTabOverflow = (layout, node, orientation, tabStripRef, miniScrollRef, tabClassName) => {\n    const [hiddenTabs, setHiddenTabs] = react__WEBPACK_IMPORTED_MODULE_0__.useState([]);\n    const [isShowHiddenTabs, setShowHiddenTabs] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n    const [isDockStickyButtons, setDockStickyButtons] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n    const selfRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const userControlledPositionRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n    const updateHiddenTabsTimerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(undefined);\n    const hiddenTabsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef([]);\n    const thumbInternalPos = react__WEBPACK_IMPORTED_MODULE_0__.useRef(0);\n    const repositioningRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(false);\n    hiddenTabsRef.current = hiddenTabs;\n    // if node changes (new model) then reset scroll to 0\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        if (tabStripRef.current) {\n            setScrollPosition(0);\n        }\n    }, [node]);\n    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        userControlledPositionRef.current = false;\n    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\n        checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons\n        if (userControlledPositionRef.current === false) {\n            scrollIntoView();\n        }\n        updateScrollMetrics();\n        updateHiddenTabs();\n    });\n    function scrollIntoView() {\n        const selectedTabNode = node.getSelectedNode();\n        if (selectedTabNode && tabStripRef.current) {\n            const stripRect = layout.getBoundingClientRect(tabStripRef.current);\n            const selectedRect = selectedTabNode.getTabRect();\n            let shift = getNear(stripRect) - getNear(selectedRect);\n            if (shift > 0 || getSize(selectedRect) > getSize(stripRect)) {\n                setScrollPosition(getScrollPosition(tabStripRef.current) - shift);\n                repositioningRef.current = true; // prevent onScroll setting userControlledPosition\n            }\n            else {\n                shift = getFar(selectedRect) - getFar(stripRect);\n                if (shift > 0) {\n                    setScrollPosition(getScrollPosition(tabStripRef.current) + shift);\n                    repositioningRef.current = true;\n                }\n            }\n        }\n    }\n    const updateScrollMetrics = () => {\n        if (tabStripRef.current && miniScrollRef.current) {\n            const t = tabStripRef.current;\n            const s = miniScrollRef.current;\n            const size = getElementSize(t);\n            const scrollSize = getScrollSize(t);\n            const position = getScrollPosition(t);\n            if (scrollSize > size && scrollSize > 0) {\n                let thumbSize = size * size / scrollSize;\n                let adjust = 0;\n                if (thumbSize < 20) {\n                    adjust = 20 - thumbSize;\n                    thumbSize = 20;\n                }\n                const thumbPos = position * (size - adjust) / scrollSize;\n                if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n                    s.style.width = thumbSize + \"px\";\n                    s.style.left = thumbPos + \"px\";\n                }\n                else {\n                    s.style.height = thumbSize + \"px\";\n                    s.style.top = thumbPos + \"px\";\n                }\n                s.style.display = \"block\";\n            }\n            else {\n                s.style.display = \"none\";\n            }\n            if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n                s.style.bottom = \"0px\";\n            }\n            else {\n                s.style.right = \"0px\";\n            }\n        }\n    };\n    const updateHiddenTabs = () => {\n        const newHiddenTabs = findHiddenTabs();\n        const showHidden = newHiddenTabs.length > 0;\n        if (showHidden !== isShowHiddenTabs) {\n            setShowHiddenTabs(showHidden);\n        }\n        if (updateHiddenTabsTimerRef.current === undefined) {\n            // throttle updates to prevent Maximum update depth exceeded error\n            updateHiddenTabsTimerRef.current = setTimeout(() => {\n                const newHiddenTabs = findHiddenTabs();\n                if (!arraysEqual(newHiddenTabs, hiddenTabsRef.current)) {\n                    setHiddenTabs(newHiddenTabs);\n                }\n                updateHiddenTabsTimerRef.current = undefined;\n            }, 100);\n        }\n    };\n    const onScroll = () => {\n        if (!repositioningRef.current) {\n            userControlledPositionRef.current = true;\n        }\n        repositioningRef.current = false;\n        updateScrollMetrics();\n        updateHiddenTabs();\n    };\n    const onScrollPointerDown = (event) => {\n        var _a;\n        event.stopPropagation();\n        miniScrollRef.current.setPointerCapture(event.pointerId);\n        const r = (_a = miniScrollRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            thumbInternalPos.current = event.clientX - r.x;\n        }\n        else {\n            thumbInternalPos.current = event.clientY - r.y;\n        }\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_2__.startDrag)(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);\n    };\n    const onDragMove = (x, y) => {\n        if (tabStripRef.current && miniScrollRef.current) {\n            const t = tabStripRef.current;\n            const s = miniScrollRef.current;\n            const size = getElementSize(t);\n            const scrollSize = getScrollSize(t);\n            const thumbSize = getElementSize(s);\n            const r = t.getBoundingClientRect();\n            let thumb = 0;\n            if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n                thumb = x - r.x - thumbInternalPos.current;\n            }\n            else {\n                thumb = y - r.y - thumbInternalPos.current;\n            }\n            thumb = Math.max(0, Math.min(scrollSize - thumbSize, thumb));\n            if (size > 0) {\n                const scrollPos = thumb * scrollSize / size;\n                setScrollPosition(scrollPos);\n            }\n        }\n    };\n    const onDragEnd = () => {\n    };\n    const onDragCancel = () => {\n    };\n    const checkForOverflow = () => {\n        if (tabStripRef.current) {\n            const strip = tabStripRef.current;\n            const tabContainer = strip.firstElementChild;\n            const offset = isDockStickyButtons ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting\n            const dock = (getElementSize(tabContainer) + offset) > getElementSize(tabStripRef.current);\n            if (dock !== isDockStickyButtons) {\n                setDockStickyButtons(dock);\n            }\n        }\n    };\n    const findHiddenTabs = () => {\n        const hidden = [];\n        if (tabStripRef.current) {\n            const strip = tabStripRef.current;\n            const stripRect = strip.getBoundingClientRect();\n            const visibleNear = getNear(stripRect) - 1;\n            const visibleFar = getFar(stripRect) + 1;\n            const tabContainer = strip.firstElementChild;\n            let i = 0;\n            Array.from(tabContainer.children).forEach((child) => {\n                const tabRect = child.getBoundingClientRect();\n                if (child.classList.contains(tabClassName)) {\n                    if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) {\n                        hidden.push(i);\n                    }\n                    i++;\n                }\n            });\n        }\n        return hidden;\n    };\n    const onMouseWheel = (event) => {\n        if (tabStripRef.current) {\n            if (node.getChildren().length === 0)\n                return;\n            let delta = 0;\n            if (Math.abs(event.deltaY) > 0) {\n                delta = -event.deltaY;\n                if (event.deltaMode === 1) {\n                    // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\n                    delta *= 40;\n                }\n                const newPos = getScrollPosition(tabStripRef.current) - delta;\n                const maxScroll = getScrollSize(tabStripRef.current) - getElementSize(tabStripRef.current);\n                const p = Math.max(0, Math.min(maxScroll, newPos));\n                setScrollPosition(p);\n                event.stopPropagation();\n            }\n        }\n    };\n    // orientation helpers:\n    const getNear = (rect) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return rect.x;\n        }\n        else {\n            return rect.y;\n        }\n    };\n    const getFar = (rect) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return rect.right;\n        }\n        else {\n            return rect.bottom;\n        }\n    };\n    const getElementSize = (elm) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return elm.clientWidth;\n        }\n        else {\n            return elm.clientHeight;\n        }\n    };\n    const getSize = (rect) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return rect.width;\n        }\n        else {\n            return rect.height;\n        }\n    };\n    const getScrollSize = (elm) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return elm.scrollWidth;\n        }\n        else {\n            return elm.scrollHeight;\n        }\n    };\n    const setScrollPosition = (p) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            tabStripRef.current.scrollLeft = p;\n        }\n        else {\n            tabStripRef.current.scrollTop = p;\n        }\n    };\n    const getScrollPosition = (elm) => {\n        if (orientation === _Orientation__WEBPACK_IMPORTED_MODULE_1__.Orientation.HORZ) {\n            return elm.scrollLeft;\n        }\n        else {\n            return elm.scrollTop;\n        }\n    };\n    return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs };\n};\nfunction arraysEqual(arr1, arr2) {\n    return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]);\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
 
 /***/ }),
 
@@ -476,7 +476,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TabSet: () => (/* binding */ TabSet)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PopupMenu */ \"./src/view/PopupMenu.tsx\");\n/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_9__);\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n\n\n\n\n\n\n\n\n\n\n\n/** @internal */\nconst TabSet = (props) => {\n    const { node, layout } = props;\n    const tabStripRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const miniScrollRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const tabStripInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const buttonBarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const icons = layout.getIcons();\n    // must use useEffect (rather than useLayoutEffect) otherwise contentrect not set correctly (has height 0 when changing theme in demo)\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n        node.setRect(layout.getBoundingClientRect(selfRef.current));\n        if (tabStripRef.current) {\n            node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));\n        }\n        const newContentRect = _Rect__WEBPACK_IMPORTED_MODULE_10__.Rect.getContentRect(contentRef.current).relativeTo(layout.getDomRect());\n        if (!node.getContentRect().equals(newContentRect)) {\n            node.setContentRect(newContentRect);\n            setTimeout(() => {\n                layout.redrawInternal(\"tabset content rect \" + newContentRect);\n            }, 0);\n        }\n    });\n    // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)\n    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(layout, node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, tabStripInnerRef, miniScrollRef, layout.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON));\n    const onOverflowClick = (event) => {\n        const callback = layout.getShowOverflowMenu();\n        const items = hiddenTabs.map(h => { return { index: h, node: node.getChildren()[h] }; });\n        if (callback !== undefined) {\n            callback(node, event, items, onOverflowItemSelect);\n        }\n        else {\n            const element = overflowbuttonRef.current;\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, node, items, onOverflowItemSelect, layout);\n        }\n        event.stopPropagation();\n    };\n    const onOverflowItemSelect = (item) => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\n        userControlledPositionRef.current = false;\n    };\n    const onDragStart = (event) => {\n        if (!layout.getEditingTab()) {\n            if (node.isEnableDrag()) {\n                event.stopPropagation();\n                layout.setDragNode(event.nativeEvent, node);\n            }\n            else {\n                event.preventDefault();\n            }\n        }\n        else {\n            event.preventDefault();\n        }\n    };\n    const onPointerDown = (event) => {\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId(), layout.getWindowId()));\n        }\n    };\n    const onAuxMouseClick = (event) => {\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    const onContextMenu = (event) => {\n        layout.showContextMenu(node, event);\n    };\n    const onInterceptPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onMaximizeToggle = (event) => {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    const onClose = (event) => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    const onCloseTab = (event) => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getChildren()[0].getId()));\n        event.stopPropagation();\n    };\n    const onPopoutTab = (event) => {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.popoutTab(selectedTabNode.getId()));\n            // layout.doAction(Actions.popoutTabset(node.getId()));\n        }\n        event.stopPropagation();\n    };\n    const onDoubleClick = (event) => {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    // Start Render\n    const cm = layout.getClassName;\n    const selectedTabNode = node.getSelectedNode();\n    const path = node.getPath();\n    const tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (let i = 0; i < node.getChildren().length; i++) {\n            const child = node.getChildren()[i];\n            let isSelected = node.getSelected() === i;\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_4__.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected }));\n            if (i < node.getChildren().length - 1) {\n                tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER) }));\n            }\n        }\n    }\n    let stickyButtons = [];\n    let buttons = [];\n    // allow customization of header contents and buttons\n    const renderState = { stickyButtons, buttons, overflowPosition: undefined };\n    layout.customizeTabSet(node, renderState);\n    stickyButtons = renderState.stickyButtons;\n    buttons = renderState.buttons;\n    const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;\n    const showClose = (isTabStretch && (node.getChildren()[0].isEnableClose())) || node.isEnableClose();\n    if (renderState.overflowPosition === undefined) {\n        renderState.overflowPosition = stickyButtons.length;\n    }\n    if (stickyButtons.length > 0) {\n        if (!node.isEnableTabWrap() && (isTabOverflow || isTabStretch)) {\n            buttons = [...stickyButtons, ...buttons];\n        }\n        else {\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    if (!node.isEnableTabWrap()) {\n        if (hiddenTabs.length > 0) {\n            const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\n            let overflowContent;\n            if (typeof icons.more === \"function\") {\n                const items = hiddenTabs.map(h => { return { index: h, node: node.getChildren()[h] }; });\n                overflowContent = icons.more(node, items);\n            }\n            else {\n                overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n                    icons.more,\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\n            }\n            buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));\n        }\n    }\n    if (selectedTabNode !== undefined &&\n        layout.isSupportsPopout() &&\n        selectedTabNode.isEnablePopout() &&\n        selectedTabNode.isEnablePopoutIcon()) {\n        const popoutTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Popout_Tab);\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"popout\", \"data-layout-path\": path + \"/button/popout\", title: popoutTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n    }\n    if (node.canMaximize()) {\n        const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\n        const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onPointerDown: onInterceptPointerDown }, 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() && showClose) {\n        const title = isTabStretch ? layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab) : layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: isTabStretch ? onCloseTab : onClose, onPointerDown: onInterceptPointerDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\n    }\n    if (node.isActive() && node.isEnableActiveIcon()) {\n        const title = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Active_Tabset);\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"active\", \"data-layout-path\": path + \"/button/active\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON) }, (typeof icons.activeTabset === \"function\") ? icons.activeTabset(node) : icons.activeTabset));\n    }\n    const buttonbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"buttonbar\", ref: buttonBarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\n    let tabStrip;\n    let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive()) {\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized()) {\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (isTabStretch) {\n        const tabNode = node.getChildren()[0];\n        if (tabNode.getTabSetClassName() !== undefined) {\n            tabStripClasses += \" \" + tabNode.getTabSetClassName();\n        }\n    }\n    if (node.isEnableTabWrap()) {\n        if (node.isEnableTabStrip()) {\n            tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: { flexWrap: \"wrap\", gap: \"1px\", marginTop: \"2px\" }, ref: tabStripRef, \"data-layout-path\": path + \"/tabstrip\", onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, draggable: true, onDragStart: onDragStart },\n                tabs,\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { flexGrow: 1 } }),\n                buttonbar));\n        }\n    }\n    else {\n        if (node.isEnableTabStrip()) {\n            let miniScrollbar = undefined;\n            if (node.isEnableTabScrollbar()) {\n                miniScrollbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: miniScrollRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR), onPointerDown: onScrollPointerDown }));\n            }\n            tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, ref: tabStripRef, \"data-layout-path\": path + \"/tabstrip\", onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, draggable: true, onWheel: onMouseWheel, onDragStart: onDragStart },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER) },\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabStripInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()), style: { overflowX: 'auto', overflowY: \"hidden\" }, onScroll: onScroll },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { width: (isTabStretch ? \"100%\" : \"none\") }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n                    miniScrollbar),\n                buttonbar));\n        }\n    }\n    var emptyTabset;\n    if (node.getChildren().length === 0) {\n        const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\n        if (placeHolderCallback) {\n            emptyTabset = placeHolderCallback(node);\n        }\n    }\n    let content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, emptyTabset);\n    if (node.getTabLocation() === \"top\") {\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            tabStrip,\n            content);\n    }\n    else {\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            content,\n            tabStrip);\n    }\n    let style = {\n        flexGrow: Math.max(1, node.getWeight() * 1000),\n        minWidth: node.getMinWidth(),\n        minHeight: node.getMinHeight(),\n        maxWidth: node.getMaxWidth(),\n        maxHeight: node.getMaxHeight()\n    };\n    if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined && !node.isMaximized()) {\n        style.display = \"none\";\n    }\n    // note: tabset container is needed to allow flexbox to size without border/padding/margin\n    // then inner tabset can have border/padding/margin for styling\n    const tabset = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTAINER), style: style },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), \"data-layout-path\": path }, content)));\n    if (node.isMaximized()) {\n        if (layout.getMainElement()) {\n            return (0,react_dom__WEBPACK_IMPORTED_MODULE_9__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: {\n                    position: \"absolute\",\n                    display: \"flex\",\n                    top: 0, left: 0, bottom: 0, right: 0\n                } }, tabset), layout.getMainElement());\n        }\n        else {\n            return tabset;\n        }\n    }\n    else {\n        return tabset;\n    }\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TabSet: () => (/* binding */ TabSet)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _I18nLabel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\n/* harmony import */ var _model_Actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\n/* harmony import */ var _PopupMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./PopupMenu */ \"./src/view/PopupMenu.tsx\");\n/* harmony import */ var _TabButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\n/* harmony import */ var _TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\n/* harmony import */ var _Orientation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/* harmony import */ var _Types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/* harmony import */ var _Utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_9__);\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\n\n\n\n\n\n\n\n\n\n\n\n/** @internal */\nconst TabSet = (props) => {\n    const { node, layout } = props;\n    const tabStripRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const miniScrollRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const tabStripInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const contentRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const buttonBarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n    const icons = layout.getIcons();\n    // must use useEffect (rather than useLayoutEffect) otherwise contentrect not set correctly (has height 0 when changing theme in demo)\n    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n        node.setRect(layout.getBoundingClientRect(selfRef.current));\n        if (tabStripRef.current) {\n            node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));\n        }\n        const newContentRect = _Rect__WEBPACK_IMPORTED_MODULE_10__.Rect.getContentRect(contentRef.current).relativeTo(layout.getDomRect());\n        if (!node.getContentRect().equals(newContentRect)) {\n            node.setContentRect(newContentRect);\n            setTimeout(() => {\n                layout.redrawInternal(\"tabset content rect \" + newContentRect);\n            }, 0);\n        }\n    });\n    // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)\n    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(layout, node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, tabStripInnerRef, miniScrollRef, layout.getClassName(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON));\n    const onOverflowClick = (event) => {\n        const callback = layout.getShowOverflowMenu();\n        const items = hiddenTabs.map(h => { return { index: h, node: node.getChildren()[h] }; });\n        if (callback !== undefined) {\n            callback(node, event, items, onOverflowItemSelect);\n        }\n        else {\n            const element = overflowbuttonRef.current;\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, node, items, onOverflowItemSelect, layout);\n        }\n        event.stopPropagation();\n    };\n    const onOverflowItemSelect = (item) => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\n        userControlledPositionRef.current = false;\n    };\n    const onDragStart = (event) => {\n        if (!layout.getEditingTab()) {\n            if (node.isEnableDrag()) {\n                event.stopPropagation();\n                layout.setDragNode(event.nativeEvent, node);\n            }\n            else {\n                event.preventDefault();\n            }\n        }\n        else {\n            event.preventDefault();\n        }\n    };\n    const onPointerDown = (event) => {\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId(), layout.getWindowId()));\n        }\n    };\n    const onAuxMouseClick = (event) => {\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    const onContextMenu = (event) => {\n        layout.showContextMenu(node, event);\n    };\n    const onInterceptPointerDown = (event) => {\n        event.stopPropagation();\n    };\n    const onMaximizeToggle = (event) => {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    const onClose = (event) => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    const onCloseTab = (event) => {\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTab(node.getChildren()[0].getId()));\n        event.stopPropagation();\n    };\n    const onPopoutTab = (event) => {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.popoutTab(selectedTabNode.getId()));\n            // layout.doAction(Actions.popoutTabset(node.getId()));\n        }\n        event.stopPropagation();\n    };\n    const onDoubleClick = (event) => {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    // Start Render\n    const cm = layout.getClassName;\n    const selectedTabNode = node.getSelectedNode();\n    const path = node.getPath();\n    const tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (let i = 0; i < node.getChildren().length; i++) {\n            const child = node.getChildren()[i];\n            let isSelected = node.getSelected() === i;\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_TabButton__WEBPACK_IMPORTED_MODULE_4__.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected }));\n            if (i < node.getChildren().length - 1) {\n                tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER) }));\n            }\n        }\n    }\n    let stickyButtons = [];\n    let buttons = [];\n    // allow customization of header contents and buttons\n    const renderState = { stickyButtons, buttons, overflowPosition: undefined };\n    layout.customizeTabSet(node, renderState);\n    stickyButtons = renderState.stickyButtons;\n    buttons = renderState.buttons;\n    const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;\n    const showClose = (isTabStretch && (node.getChildren()[0].isEnableClose())) || node.isEnableClose();\n    if (renderState.overflowPosition === undefined) {\n        renderState.overflowPosition = stickyButtons.length;\n    }\n    if (stickyButtons.length > 0) {\n        if (!node.isEnableTabWrap() && (isDockStickyButtons || isTabStretch)) {\n            buttons = [...stickyButtons, ...buttons];\n        }\n        else {\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    if (!node.isEnableTabWrap()) {\n        if (isShowHiddenTabs) {\n            const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\n            let overflowContent;\n            if (typeof icons.more === \"function\") {\n                const items = hiddenTabs.map(h => { return { index: h, node: node.getChildren()[h] }; });\n                overflowContent = icons.more(node, items);\n            }\n            else {\n                overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n                    icons.more,\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length > 0 ? hiddenTabs.length : \"\")));\n            }\n            buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));\n        }\n    }\n    if (selectedTabNode !== undefined &&\n        layout.isSupportsPopout() &&\n        selectedTabNode.isEnablePopout() &&\n        selectedTabNode.isEnablePopoutIcon()) {\n        const popoutTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Popout_Tab);\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"popout\", \"data-layout-path\": path + \"/button/popout\", title: popoutTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\n    }\n    if (node.canMaximize()) {\n        const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\n        const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onPointerDown: onInterceptPointerDown }, 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() && showClose) {\n        const title = isTabStretch ? layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tab) : layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: isTabStretch ? onCloseTab : onClose, onPointerDown: onInterceptPointerDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\n    }\n    if (node.isActive() && node.isEnableActiveIcon()) {\n        const title = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Active_Tabset);\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"active\", \"data-layout-path\": path + \"/button/active\", title: title, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON) }, (typeof icons.activeTabset === \"function\") ? icons.activeTabset(node) : icons.activeTabset));\n    }\n    const buttonbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"buttonbar\", ref: buttonBarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\n    let tabStrip;\n    let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive()) {\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized()) {\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (isTabStretch) {\n        const tabNode = node.getChildren()[0];\n        if (tabNode.getTabSetClassName() !== undefined) {\n            tabStripClasses += \" \" + tabNode.getTabSetClassName();\n        }\n    }\n    if (node.isEnableTabWrap()) {\n        if (node.isEnableTabStrip()) {\n            tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: { flexWrap: \"wrap\", gap: \"1px\", marginTop: \"2px\" }, ref: tabStripRef, \"data-layout-path\": path + \"/tabstrip\", onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, draggable: true, onDragStart: onDragStart },\n                tabs,\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { flexGrow: 1 } }),\n                buttonbar));\n        }\n    }\n    else {\n        if (node.isEnableTabStrip()) {\n            let miniScrollbar = undefined;\n            if (node.isEnableTabScrollbar()) {\n                miniScrollbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: miniScrollRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR), onPointerDown: onScrollPointerDown }));\n            }\n            tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, ref: tabStripRef, \"data-layout-path\": path + \"/tabstrip\", onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, draggable: true, onWheel: onMouseWheel, onDragStart: onDragStart },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER) },\n                    react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabStripInnerRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()), style: { overflowX: 'auto', overflowY: \"hidden\" }, onScroll: onScroll },\n                        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { width: (isTabStretch ? \"100%\" : \"none\") }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n                    miniScrollbar),\n                buttonbar));\n        }\n    }\n    var emptyTabset;\n    if (node.getChildren().length === 0) {\n        const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\n        if (placeHolderCallback) {\n            emptyTabset = placeHolderCallback(node);\n        }\n    }\n    let content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: contentRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, emptyTabset);\n    if (node.getTabLocation() === \"top\") {\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            tabStrip,\n            content);\n    }\n    else {\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n            content,\n            tabStrip);\n    }\n    let style = {\n        flexGrow: Math.max(1, node.getWeight() * 1000),\n        minWidth: node.getMinWidth(),\n        minHeight: node.getMinHeight(),\n        maxWidth: node.getMaxWidth(),\n        maxHeight: node.getMaxHeight()\n    };\n    if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined && !node.isMaximized()) {\n        style.display = \"none\";\n    }\n    // note: tabset container is needed to allow flexbox to size without border/padding/margin\n    // then inner tabset can have border/padding/margin for styling\n    const tabset = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTAINER), style: style },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), \"data-layout-path\": path }, content)));\n    if (node.isMaximized()) {\n        if (layout.getMainElement()) {\n            return (0,react_dom__WEBPACK_IMPORTED_MODULE_9__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: {\n                    position: \"absolute\",\n                    display: \"flex\",\n                    top: 0, left: 0, bottom: 0, right: 0\n                } }, tabset), layout.getMainElement());\n        }\n        else {\n            return tabset;\n        }\n    }\n    else {\n        return tabset;\n    }\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
 
 /***/ }),