flexlayout-react 0.7.8 → 0.7.10

package/ChangeLog.txt

@@ -1,3 +1,13 @@
+0.7.10
+Fix for #399 - the overflow button in a tabset is now placed after 
+any sticky buttons (additional buttons that stick to the last tab of a tabset)
+but before any other buttons.
+Enabled sticky buttons in border tabsets
+
+0.7.9
+Fix drag issue found when used in devtool extension
+Fix double render in popout when in strict mode
+
 0.7.8
 Fix popout size of tab with individual border size
 Hide edge handles when disabled

package/README.md

@@ -58,7 +58,15 @@ import { createRoot } from "react-dom/client";
 import * as FlexLayout from "flexlayout-react";
 ```
 
-Include the light, underline, gray or dark style in your html:
+Include the light, underline, gray or dark theme by either:
+
+Adding an additional import:
+
+```
+import 'flexlayout-react/style/light.css';  
+```
+
+or by adding the css to your html:
 
 ```
 <link rel="stylesheet" href="node_modules/flexlayout-react/style/light.css" />
@@ -614,6 +622,7 @@ To build the npm distribution run 'yarn build', this will create the artifacts i
 | Name | Repository |
 | ------------- |:-------------|
 | rc-dock | https://github.com/ticlo/rc-dock | 
+| Dockview | https://dockview.dev/ | 
 | lumino | https://github.com/jupyterlab/lumino | 
 | golden-layout | https://github.com/golden-layout/golden-layout |
 | react-mosaic | https://github.com/nomcopter/react-mosaic |

package/dist/flexlayout.js

@@ -56,7 +56,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 */   \"DragDrop\": () => (/* binding */ DragDrop)\n/* harmony export */ });\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\n\r\n/** @internal */\r\nconst canUseDOM = !!(typeof window !== \"undefined\" && window.document && window.document.createElement);\r\nclass DragDrop {\r\n    /** @internal */\r\n    constructor() {\r\n        /** @internal */\r\n        this._manualGlassManagement = false;\r\n        /** @internal */\r\n        this._startX = 0;\r\n        /** @internal */\r\n        this._startY = 0;\r\n        /** @internal */\r\n        this._dragDepth = 0;\r\n        /** @internal */\r\n        this._glassShowing = false;\r\n        /** @internal */\r\n        this._dragging = false;\r\n        /** @internal */\r\n        this._active = false; // drag and drop is in progress, can be used on ios to prevent body scrolling (see demo)\r\n        if (canUseDOM) {\r\n            // check for serverside rendering\r\n            this._glass = document.createElement(\"div\");\r\n            this._glass.style.zIndex = \"998\";\r\n            this._glass.style.backgroundColor = \"transparent\";\r\n            this._glass.style.outline = \"none\";\r\n        }\r\n        this._defaultGlassCursor = \"default\";\r\n        this._onMouseMove = this._onMouseMove.bind(this);\r\n        this._onMouseUp = this._onMouseUp.bind(this);\r\n        this._onKeyPress = this._onKeyPress.bind(this);\r\n        this._onDragCancel = this._onDragCancel.bind(this);\r\n        this._onDragEnter = this._onDragEnter.bind(this);\r\n        this._onDragLeave = this._onDragLeave.bind(this);\r\n        this.resizeGlass = this.resizeGlass.bind(this);\r\n        this._lastClick = 0;\r\n        this._clickX = 0;\r\n        this._clickY = 0;\r\n    }\r\n    // if you add the glass pane then you should remove it\r\n    addGlass(fCancel) {\r\n        var _a;\r\n        if (!this._glassShowing) {\r\n            if (!this._document) {\r\n                this._document = window.document;\r\n            }\r\n            if (!this._rootElement) {\r\n                this._rootElement = this._document.body;\r\n            }\r\n            this.resizeGlass();\r\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.resizeGlass);\r\n            this._document.body.appendChild(this._glass);\r\n            this._glass.tabIndex = -1;\r\n            this._glass.focus();\r\n            this._glass.addEventListener(\"keydown\", this._onKeyPress);\r\n            this._glass.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\r\n            this._glass.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\r\n            this._glass.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\r\n            this._glassShowing = true;\r\n            this._fDragCancel = fCancel;\r\n            this._manualGlassManagement = false;\r\n        }\r\n        else {\r\n            // second call to addGlass (via dragstart)\r\n            this._manualGlassManagement = true;\r\n        }\r\n    }\r\n    resizeGlass() {\r\n        const glassRect = _Rect__WEBPACK_IMPORTED_MODULE_0__.Rect.fromElement(this._rootElement);\r\n        glassRect.positionElement(this._glass, \"fixed\");\r\n    }\r\n    hideGlass() {\r\n        var _a;\r\n        if (this._glassShowing) {\r\n            this._document.body.removeChild(this._glass);\r\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.resizeGlass);\r\n            this._glassShowing = false;\r\n            this._document = undefined;\r\n            this._rootElement = undefined;\r\n            this.setGlassCursorOverride(undefined);\r\n        }\r\n    }\r\n    /** @internal */\r\n    _updateGlassCursor() {\r\n        var _a;\r\n        this._glass.style.cursor = (_a = this._glassCursorOverride) !== null && _a !== void 0 ? _a : this._defaultGlassCursor;\r\n    }\r\n    /** @internal */\r\n    _setDefaultGlassCursor(cursor) {\r\n        this._defaultGlassCursor = cursor;\r\n        this._updateGlassCursor();\r\n    }\r\n    setGlassCursorOverride(cursor) {\r\n        this._glassCursorOverride = cursor;\r\n        this._updateGlassCursor();\r\n    }\r\n    startDrag(event, fDragStart, fDragMove, fDragEnd, fDragCancel, fClick, fDblClick, currentDocument, rootElement) {\r\n        // prevent 'duplicate' action (mouse event for same action as previous touch event (a fix for ios))\r\n        if (event && this._lastEvent && this._lastEvent.type.startsWith(\"touch\") && event.type.startsWith(\"mouse\") && event.timeStamp - this._lastEvent.timeStamp < 500) {\r\n            return;\r\n        }\r\n        this._lastEvent = event;\r\n        if (currentDocument) {\r\n            this._document = currentDocument;\r\n        }\r\n        else {\r\n            this._document = window.document;\r\n        }\r\n        if (rootElement) {\r\n            this._rootElement = rootElement;\r\n        }\r\n        else {\r\n            this._rootElement = this._document.body;\r\n        }\r\n        const posEvent = this._getLocationEvent(event);\r\n        this.addGlass(fDragCancel);\r\n        if (this._dragging) {\r\n            console.warn(\"this._dragging true on startDrag should never happen\");\r\n        }\r\n        if (event) {\r\n            this._startX = posEvent.clientX;\r\n            this._startY = posEvent.clientY;\r\n            if (!window.matchMedia || window.matchMedia(\"(pointer: fine)\").matches) {\r\n                this._setDefaultGlassCursor(getComputedStyle(event.target).cursor);\r\n            }\r\n            this._stopPropagation(event);\r\n            this._preventDefault(event);\r\n        }\r\n        else {\r\n            this._startX = 0;\r\n            this._startY = 0;\r\n            this._setDefaultGlassCursor(\"default\");\r\n        }\r\n        this._dragging = false;\r\n        this._fDragStart = fDragStart;\r\n        this._fDragMove = fDragMove;\r\n        this._fDragEnd = fDragEnd;\r\n        this._fDragCancel = fDragCancel;\r\n        this._fClick = fClick;\r\n        this._fDblClick = fDblClick;\r\n        this._active = true;\r\n        if ((event === null || event === void 0 ? void 0 : event.type) === 'dragenter') {\r\n            this._dragDepth = 1;\r\n            this._rootElement.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\r\n            this._rootElement.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\r\n            this._rootElement.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\r\n            this._document.addEventListener(\"dragend\", this._onDragCancel, { passive: false });\r\n            this._document.addEventListener(\"drop\", this._onMouseUp, { passive: false });\r\n        }\r\n        else {\r\n            this._document.addEventListener(\"mouseup\", this._onMouseUp, { passive: false });\r\n            this._document.addEventListener(\"mousemove\", this._onMouseMove, { passive: false });\r\n            this._document.addEventListener(\"touchend\", this._onMouseUp, { passive: false });\r\n            this._document.addEventListener(\"touchmove\", this._onMouseMove, { passive: false });\r\n        }\r\n    }\r\n    isDragging() {\r\n        return this._dragging;\r\n    }\r\n    isActive() {\r\n        return this._active;\r\n    }\r\n    toString() {\r\n        const rtn = \"(DragDrop: \" + \"startX=\" + this._startX + \", startY=\" + this._startY + \", dragging=\" + this._dragging + \")\";\r\n        return rtn;\r\n    }\r\n    /** @internal */\r\n    _onKeyPress(event) {\r\n        if (event.keyCode === 27) {\r\n            // esc\r\n            this._onDragCancel();\r\n        }\r\n    }\r\n    /** @internal */\r\n    _onDragCancel() {\r\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\r\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\r\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\r\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\r\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\r\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\r\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\r\n        this.hideGlass();\r\n        if (this._fDragCancel !== undefined) {\r\n            this._fDragCancel(this._dragging);\r\n        }\r\n        this._dragging = false;\r\n        this._active = false;\r\n    }\r\n    /** @internal */\r\n    _getLocationEvent(event) {\r\n        let posEvent = event;\r\n        if (event && event.touches) {\r\n            posEvent = event.touches[0];\r\n        }\r\n        return posEvent;\r\n    }\r\n    /** @internal */\r\n    _getLocationEventEnd(event) {\r\n        let posEvent = event;\r\n        if (event.changedTouches) {\r\n            posEvent = event.changedTouches[0];\r\n        }\r\n        return posEvent;\r\n    }\r\n    /** @internal */\r\n    _stopPropagation(event) {\r\n        if (event.stopPropagation) {\r\n            event.stopPropagation();\r\n        }\r\n    }\r\n    /** @internal */\r\n    _preventDefault(event) {\r\n        if (event.preventDefault && event.cancelable) {\r\n            event.preventDefault();\r\n        }\r\n        return event;\r\n    }\r\n    /** @internal */\r\n    _onMouseMove(event) {\r\n        this._lastEvent = event;\r\n        const posEvent = this._getLocationEvent(event);\r\n        this._stopPropagation(event);\r\n        this._preventDefault(event);\r\n        if (!this._dragging && (Math.abs(this._startX - posEvent.clientX) > 5 || Math.abs(this._startY - posEvent.clientY) > 5)) {\r\n            this._dragging = true;\r\n            if (this._fDragStart) {\r\n                this._setDefaultGlassCursor(\"move\");\r\n                this._dragging = this._fDragStart({ clientX: this._startX, clientY: this._startY });\r\n            }\r\n        }\r\n        if (this._dragging) {\r\n            if (this._fDragMove) {\r\n                this._fDragMove(posEvent);\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onMouseUp(event) {\r\n        this._lastEvent = event;\r\n        const posEvent = this._getLocationEventEnd(event);\r\n        this._stopPropagation(event);\r\n        this._preventDefault(event);\r\n        this._active = false;\r\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\r\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\r\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\r\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\r\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\r\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\r\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\r\n        if (!this._manualGlassManagement) {\r\n            this.hideGlass();\r\n        }\r\n        if (this._dragging) {\r\n            this._dragging = false;\r\n            if (this._fDragEnd) {\r\n                this._fDragEnd(event);\r\n            }\r\n            // dump(\"set dragging = false\\n\");\r\n        }\r\n        else {\r\n            if (this._fDragCancel) {\r\n                this._fDragCancel(this._dragging);\r\n            }\r\n            if (Math.abs(this._startX - posEvent.clientX) <= 5 && Math.abs(this._startY - posEvent.clientY) <= 5) {\r\n                let isDoubleClick = false;\r\n                const clickTime = new Date().getTime();\r\n                // check for double click\r\n                if (Math.abs(this._clickX - posEvent.clientX) <= 5 && Math.abs(this._clickY - posEvent.clientY) <= 5) {\r\n                    if (clickTime - this._lastClick < 500) {\r\n                        if (this._fDblClick) {\r\n                            this._fDblClick(event);\r\n                            isDoubleClick = true;\r\n                        }\r\n                    }\r\n                }\r\n                if (!isDoubleClick && this._fClick) {\r\n                    this._fClick(event);\r\n                }\r\n                this._lastClick = clickTime;\r\n                this._clickX = posEvent.clientX;\r\n                this._clickY = posEvent.clientY;\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onDragEnter(event) {\r\n        this._preventDefault(event);\r\n        this._stopPropagation(event);\r\n        this._dragDepth++;\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onDragLeave(event) {\r\n        this._preventDefault(event);\r\n        this._stopPropagation(event);\r\n        this._dragDepth--;\r\n        if (this._dragDepth <= 0) {\r\n            this._onDragCancel();\r\n        }\r\n        return false;\r\n    }\r\n}\r\nDragDrop.instance = new DragDrop();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/DragDrop.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DragDrop\": () => (/* binding */ DragDrop)\n/* harmony export */ });\n/* harmony import */ var _Rect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Rect */ \"./src/Rect.ts\");\n\r\n/** @internal */\r\nconst canUseDOM = !!(typeof window !== \"undefined\" && window.document && window.document.createElement);\r\nclass DragDrop {\r\n    /** @internal */\r\n    constructor() {\r\n        /** @internal */\r\n        this._manualGlassManagement = false;\r\n        /** @internal */\r\n        this._startX = 0;\r\n        /** @internal */\r\n        this._startY = 0;\r\n        /** @internal */\r\n        this._dragDepth = 0;\r\n        /** @internal */\r\n        this._glassShowing = false;\r\n        /** @internal */\r\n        this._dragging = false;\r\n        /** @internal */\r\n        this._active = false; // drag and drop is in progress, can be used on ios to prevent body scrolling (see demo)\r\n        if (canUseDOM) {\r\n            // check for serverside rendering\r\n            this._glass = document.createElement(\"div\");\r\n            this._glass.style.zIndex = \"998\";\r\n            this._glass.style.backgroundColor = \"transparent\";\r\n            this._glass.style.outline = \"none\";\r\n        }\r\n        this._defaultGlassCursor = \"default\";\r\n        this._onMouseMove = this._onMouseMove.bind(this);\r\n        this._onMouseUp = this._onMouseUp.bind(this);\r\n        this._onKeyPress = this._onKeyPress.bind(this);\r\n        this._onDragCancel = this._onDragCancel.bind(this);\r\n        this._onDragEnter = this._onDragEnter.bind(this);\r\n        this._onDragLeave = this._onDragLeave.bind(this);\r\n        this.resizeGlass = this.resizeGlass.bind(this);\r\n        this._lastClick = 0;\r\n        this._clickX = 0;\r\n        this._clickY = 0;\r\n    }\r\n    // if you add the glass pane then you should remove it\r\n    addGlass(fCancel) {\r\n        var _a;\r\n        if (!this._glassShowing) {\r\n            if (!this._document) {\r\n                this._document = window.document;\r\n            }\r\n            if (!this._rootElement) {\r\n                this._rootElement = this._document.body;\r\n            }\r\n            this.resizeGlass();\r\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.resizeGlass);\r\n            this._document.body.appendChild(this._glass);\r\n            this._glass.tabIndex = -1;\r\n            this._glass.focus();\r\n            this._glass.addEventListener(\"keydown\", this._onKeyPress);\r\n            this._glass.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\r\n            this._glass.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\r\n            this._glass.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\r\n            this._glassShowing = true;\r\n            this._fDragCancel = fCancel;\r\n            this._manualGlassManagement = false;\r\n        }\r\n        else {\r\n            // second call to addGlass (via dragstart)\r\n            this._manualGlassManagement = true;\r\n        }\r\n    }\r\n    resizeGlass() {\r\n        const glassRect = _Rect__WEBPACK_IMPORTED_MODULE_0__.Rect.fromElement(this._rootElement);\r\n        glassRect.positionElement(this._glass, \"fixed\");\r\n    }\r\n    hideGlass() {\r\n        var _a;\r\n        if (this._glassShowing) {\r\n            this._document.body.removeChild(this._glass);\r\n            (_a = this._document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.resizeGlass);\r\n            this._glassShowing = false;\r\n            this._document = undefined;\r\n            this._rootElement = undefined;\r\n            this.setGlassCursorOverride(undefined);\r\n        }\r\n    }\r\n    /** @internal */\r\n    _updateGlassCursor() {\r\n        var _a;\r\n        this._glass.style.cursor = (_a = this._glassCursorOverride) !== null && _a !== void 0 ? _a : this._defaultGlassCursor;\r\n    }\r\n    /** @internal */\r\n    _setDefaultGlassCursor(cursor) {\r\n        this._defaultGlassCursor = cursor;\r\n        this._updateGlassCursor();\r\n    }\r\n    setGlassCursorOverride(cursor) {\r\n        this._glassCursorOverride = cursor;\r\n        this._updateGlassCursor();\r\n    }\r\n    startDrag(event, fDragStart, fDragMove, fDragEnd, fDragCancel, fClick, fDblClick, currentDocument, rootElement) {\r\n        // prevent 'duplicate' action (mouse event for same action as previous touch event (a fix for ios))\r\n        if (event && this._lastEvent && this._lastEvent.type.startsWith(\"touch\") && event.type.startsWith(\"mouse\") && event.timeStamp - this._lastEvent.timeStamp < 500) {\r\n            return;\r\n        }\r\n        if (this._dragging) {\r\n            return;\r\n        }\r\n        this._lastEvent = event;\r\n        if (currentDocument) {\r\n            this._document = currentDocument;\r\n        }\r\n        else {\r\n            this._document = window.document;\r\n        }\r\n        if (rootElement) {\r\n            this._rootElement = rootElement;\r\n        }\r\n        else {\r\n            this._rootElement = this._document.body;\r\n        }\r\n        const posEvent = this._getLocationEvent(event);\r\n        this.addGlass(fDragCancel);\r\n        if (event) {\r\n            this._startX = posEvent.clientX;\r\n            this._startY = posEvent.clientY;\r\n            if (!window.matchMedia || window.matchMedia(\"(pointer: fine)\").matches) {\r\n                this._setDefaultGlassCursor(getComputedStyle(event.target).cursor);\r\n            }\r\n            this._stopPropagation(event);\r\n            this._preventDefault(event);\r\n        }\r\n        else {\r\n            this._startX = 0;\r\n            this._startY = 0;\r\n            this._setDefaultGlassCursor(\"default\");\r\n        }\r\n        this._dragging = false;\r\n        this._fDragStart = fDragStart;\r\n        this._fDragMove = fDragMove;\r\n        this._fDragEnd = fDragEnd;\r\n        this._fDragCancel = fDragCancel;\r\n        this._fClick = fClick;\r\n        this._fDblClick = fDblClick;\r\n        this._active = true;\r\n        if ((event === null || event === void 0 ? void 0 : event.type) === 'dragenter') {\r\n            this._dragDepth = 1;\r\n            this._rootElement.addEventListener(\"dragenter\", this._onDragEnter, { passive: false });\r\n            this._rootElement.addEventListener(\"dragover\", this._onMouseMove, { passive: false });\r\n            this._rootElement.addEventListener(\"dragleave\", this._onDragLeave, { passive: false });\r\n            this._document.addEventListener(\"dragend\", this._onDragCancel, { passive: false });\r\n            this._document.addEventListener(\"drop\", this._onMouseUp, { passive: false });\r\n        }\r\n        else {\r\n            this._document.addEventListener(\"mouseup\", this._onMouseUp, { passive: false });\r\n            this._document.addEventListener(\"mousemove\", this._onMouseMove, { passive: false });\r\n            this._document.addEventListener(\"touchend\", this._onMouseUp, { passive: false });\r\n            this._document.addEventListener(\"touchmove\", this._onMouseMove, { passive: false });\r\n        }\r\n    }\r\n    isDragging() {\r\n        return this._dragging;\r\n    }\r\n    isActive() {\r\n        return this._active;\r\n    }\r\n    toString() {\r\n        const rtn = \"(DragDrop: \" + \"startX=\" + this._startX + \", startY=\" + this._startY + \", dragging=\" + this._dragging + \")\";\r\n        return rtn;\r\n    }\r\n    /** @internal */\r\n    _onKeyPress(event) {\r\n        if (event.keyCode === 27) {\r\n            // esc\r\n            this._onDragCancel();\r\n        }\r\n    }\r\n    /** @internal */\r\n    _onDragCancel() {\r\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\r\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\r\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\r\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\r\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\r\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\r\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\r\n        this.hideGlass();\r\n        if (this._fDragCancel !== undefined) {\r\n            this._fDragCancel(this._dragging);\r\n        }\r\n        this._dragging = false;\r\n        this._active = false;\r\n    }\r\n    /** @internal */\r\n    _getLocationEvent(event) {\r\n        let posEvent = event;\r\n        if (event && event.touches) {\r\n            posEvent = event.touches[0];\r\n        }\r\n        return posEvent;\r\n    }\r\n    /** @internal */\r\n    _getLocationEventEnd(event) {\r\n        let posEvent = event;\r\n        if (event.changedTouches) {\r\n            posEvent = event.changedTouches[0];\r\n        }\r\n        return posEvent;\r\n    }\r\n    /** @internal */\r\n    _stopPropagation(event) {\r\n        if (event.stopPropagation) {\r\n            event.stopPropagation();\r\n        }\r\n    }\r\n    /** @internal */\r\n    _preventDefault(event) {\r\n        if (event.preventDefault && event.cancelable) {\r\n            event.preventDefault();\r\n        }\r\n        return event;\r\n    }\r\n    /** @internal */\r\n    _onMouseMove(event) {\r\n        this._lastEvent = event;\r\n        const posEvent = this._getLocationEvent(event);\r\n        this._stopPropagation(event);\r\n        this._preventDefault(event);\r\n        if (!this._dragging && (Math.abs(this._startX - posEvent.clientX) > 5 || Math.abs(this._startY - posEvent.clientY) > 5)) {\r\n            this._dragging = true;\r\n            if (this._fDragStart) {\r\n                this._setDefaultGlassCursor(\"move\");\r\n                this._dragging = this._fDragStart({ clientX: this._startX, clientY: this._startY });\r\n            }\r\n        }\r\n        if (this._dragging) {\r\n            if (this._fDragMove) {\r\n                this._fDragMove(posEvent);\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onMouseUp(event) {\r\n        this._lastEvent = event;\r\n        const posEvent = this._getLocationEventEnd(event);\r\n        this._stopPropagation(event);\r\n        this._preventDefault(event);\r\n        this._active = false;\r\n        this._rootElement.removeEventListener(\"dragenter\", this._onDragEnter);\r\n        this._rootElement.removeEventListener(\"dragover\", this._onMouseMove);\r\n        this._rootElement.removeEventListener(\"dragleave\", this._onDragLeave);\r\n        this._document.removeEventListener(\"dragend\", this._onDragCancel);\r\n        this._document.removeEventListener(\"drop\", this._onMouseUp);\r\n        this._document.removeEventListener(\"mousemove\", this._onMouseMove);\r\n        this._document.removeEventListener(\"mouseup\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchend\", this._onMouseUp);\r\n        this._document.removeEventListener(\"touchmove\", this._onMouseMove);\r\n        if (!this._manualGlassManagement) {\r\n            this.hideGlass();\r\n        }\r\n        if (this._dragging) {\r\n            this._dragging = false;\r\n            if (this._fDragEnd) {\r\n                this._fDragEnd(event);\r\n            }\r\n            // dump(\"set dragging = false\\n\");\r\n        }\r\n        else {\r\n            if (this._fDragCancel) {\r\n                this._fDragCancel(this._dragging);\r\n            }\r\n            if (Math.abs(this._startX - posEvent.clientX) <= 5 && Math.abs(this._startY - posEvent.clientY) <= 5) {\r\n                let isDoubleClick = false;\r\n                const clickTime = new Date().getTime();\r\n                // check for double click\r\n                if (Math.abs(this._clickX - posEvent.clientX) <= 5 && Math.abs(this._clickY - posEvent.clientY) <= 5) {\r\n                    if (clickTime - this._lastClick < 500) {\r\n                        if (this._fDblClick) {\r\n                            this._fDblClick(event);\r\n                            isDoubleClick = true;\r\n                        }\r\n                    }\r\n                }\r\n                if (!isDoubleClick && this._fClick) {\r\n                    this._fClick(event);\r\n                }\r\n                this._lastClick = clickTime;\r\n                this._clickX = posEvent.clientX;\r\n                this._clickY = posEvent.clientY;\r\n            }\r\n        }\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onDragEnter(event) {\r\n        this._preventDefault(event);\r\n        this._stopPropagation(event);\r\n        this._dragDepth++;\r\n        return false;\r\n    }\r\n    /** @internal */\r\n    _onDragLeave(event) {\r\n        this._preventDefault(event);\r\n        this._stopPropagation(event);\r\n        this._dragDepth--;\r\n        if (this._dragDepth <= 0) {\r\n            this._onDragCancel();\r\n        }\r\n        return false;\r\n    }\r\n}\r\nDragDrop.instance = new DragDrop();\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/DragDrop.ts?");
 
 /***/ }),
 
@@ -296,7 +296,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/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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst BorderTabSet = (props) => {\r\n    const { border, layout, iconFactory, titleFactory, icons, path } = props;\r\n    const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__.useTabOverflow)(border, _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_9__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(border, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(border, event);\r\n    };\r\n    const onInterceptMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    const onOverflowClick = (event) => {\r\n        const callback = layout.getShowOverflowMenu();\r\n        if (callback !== undefined) {\r\n            callback(border, event, hiddenTabs, onOverflowItemSelect);\r\n        }\r\n        else {\r\n            const element = overflowbuttonRef.current;\r\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onOverflowItemSelect = (item) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.selectTab(item.node.getId()));\r\n        userControlledLeft.current = false;\r\n    };\r\n    const onFloatTab = (event) => {\r\n        const selectedTabNode = border.getChildren()[border.getSelected()];\r\n        if (selectedTabNode !== undefined) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.floatTab(selectedTabNode.getId()));\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const cm = layout.getClassName;\r\n    let style = border.getTabHeaderRect().styleWithPosition({});\r\n    const tabs = [];\r\n    const layoutTab = (i) => {\r\n        let isSelected = border.getSelected() === i;\r\n        let child = border.getChildren()[i];\r\n        tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderButton__WEBPACK_IMPORTED_MODULE_2__.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\r\n        if (i < border.getChildren().length - 1) {\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER) }));\r\n        }\r\n    };\r\n    for (let i = 0; i < border.getChildren().length; i++) {\r\n        layoutTab(i);\r\n    }\r\n    let borderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\r\n    if (border.getClassName() !== undefined) {\r\n        borderClasses += \" \" + border.getClassName();\r\n    }\r\n    // allow customization of tabset right/bottom buttons\r\n    let buttons = [];\r\n    const renderState = { headerContent: undefined, buttons, stickyButtons: [], headerButtons: [] };\r\n    layout.customizeTabSet(border, renderState);\r\n    buttons = renderState.buttons;\r\n    let toolbar;\r\n    if (hiddenTabs.length > 0) {\r\n        const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Overflow_Menu_Tooltip);\r\n        let overflowContent;\r\n        if (typeof icons.more === \"function\") {\r\n            overflowContent = icons.more(border, hiddenTabs);\r\n        }\r\n        else {\r\n            overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n                icons.more,\r\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\r\n        }\r\n        buttons.push(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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\r\n    }\r\n    const selectedIndex = border.getSelected();\r\n    if (selectedIndex !== -1) {\r\n        const selectedTabNode = border.getChildren()[selectedIndex];\r\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\r\n            const floatTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Float_Tab);\r\n            buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"float\", title: floatTitle, 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: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\r\n        }\r\n    }\r\n    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));\r\n    style = layout.styleFont(style);\r\n    let innerStyle = {};\r\n    const borderHeight = border.getBorderBarSize() - 1;\r\n    if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.LEFT) {\r\n        innerStyle = { right: borderHeight, height: borderHeight, top: position };\r\n    }\r\n    else if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.RIGHT) {\r\n        innerStyle = { left: borderHeight, height: borderHeight, top: position };\r\n    }\r\n    else {\r\n        innerStyle = { height: borderHeight, left: position };\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, dir: \"ltr\", style: style, className: borderClasses, \"data-layout-path\": path, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\r\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { height: borderHeight }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) },\r\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()) }, tabs)),\r\n        toolbar));\r\n};\r\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/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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst BorderTabSet = (props) => {\r\n    const { border, layout, iconFactory, titleFactory, icons, path } = props;\r\n    const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_6__.useTabOverflow)(border, _Orientation__WEBPACK_IMPORTED_MODULE_7__.Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_9__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(border, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(border, event);\r\n    };\r\n    const onInterceptMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    const onOverflowClick = (event) => {\r\n        const callback = layout.getShowOverflowMenu();\r\n        if (callback !== undefined) {\r\n            callback(border, event, hiddenTabs, onOverflowItemSelect);\r\n        }\r\n        else {\r\n            const element = overflowbuttonRef.current;\r\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onOverflowItemSelect = (item) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.selectTab(item.node.getId()));\r\n        userControlledLeft.current = false;\r\n    };\r\n    const onFloatTab = (event) => {\r\n        const selectedTabNode = border.getChildren()[border.getSelected()];\r\n        if (selectedTabNode !== undefined) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_4__.Actions.floatTab(selectedTabNode.getId()));\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const cm = layout.getClassName;\r\n    let style = border.getTabHeaderRect().styleWithPosition({});\r\n    const tabs = [];\r\n    const layoutTab = (i) => {\r\n        let isSelected = border.getSelected() === i;\r\n        let child = border.getChildren()[i];\r\n        tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_BorderButton__WEBPACK_IMPORTED_MODULE_2__.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\r\n        if (i < border.getChildren().length - 1) {\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"divider\" + i, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER) }));\r\n        }\r\n    };\r\n    for (let i = 0; i < border.getChildren().length; i++) {\r\n        layoutTab(i);\r\n    }\r\n    let borderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\r\n    if (border.getClassName() !== undefined) {\r\n        borderClasses += \" \" + border.getClassName();\r\n    }\r\n    // allow customization of tabset right/bottom buttons\r\n    let buttons = [];\r\n    let stickyButtons = [];\r\n    const renderState = { headerContent: undefined, buttons, stickyButtons: stickyButtons, headerButtons: [] };\r\n    layout.customizeTabSet(border, renderState);\r\n    buttons = renderState.buttons;\r\n    if (hiddenTabs.length > 0) {\r\n        const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Overflow_Menu_Tooltip);\r\n        let overflowContent;\r\n        if (typeof icons.more === \"function\") {\r\n            overflowContent = icons.more(border, hiddenTabs);\r\n        }\r\n        else {\r\n            overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n                icons.more,\r\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\r\n        }\r\n        buttons.unshift(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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\r\n    }\r\n    if (stickyButtons.length > 0) {\r\n        if (tabsTruncated) {\r\n            buttons = [...stickyButtons, ...buttons];\r\n        }\r\n        else {\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\r\n        }\r\n    }\r\n    const selectedIndex = border.getSelected();\r\n    if (selectedIndex !== -1) {\r\n        const selectedTabNode = border.getChildren()[selectedIndex];\r\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\r\n            const floatTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_5__.I18nLabel.Float_Tab);\r\n            buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"float\", title: floatTitle, 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: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\r\n        }\r\n    }\r\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));\r\n    style = layout.styleFont(style);\r\n    let innerStyle = {};\r\n    const borderHeight = border.getBorderBarSize() - 1;\r\n    if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.LEFT) {\r\n        innerStyle = { right: borderHeight, height: borderHeight, top: position };\r\n    }\r\n    else if (border.getLocation() === _DockLocation__WEBPACK_IMPORTED_MODULE_1__.DockLocation.RIGHT) {\r\n        innerStyle = { left: borderHeight, height: borderHeight, top: position };\r\n    }\r\n    else {\r\n        innerStyle = { height: borderHeight, left: position };\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, dir: \"ltr\", style: style, className: borderClasses, \"data-layout-path\": path, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\r\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { height: borderHeight }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_8__.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) },\r\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()) }, tabs)),\r\n        toolbar));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
 
 /***/ }),
 
@@ -316,7 +316,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 */   \"FloatingWindow\": () => (/* binding */ FloatingWindow)\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 _Types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n\r\n\r\n\r\n/** @internal */\r\nconst FloatingWindow = (props) => {\r\n    const { title, id, url, rect, onCloseWindow, onSetWindow, children } = props;\r\n    const popoutWindow = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const timerId = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const [content, setContent] = react__WEBPACK_IMPORTED_MODULE_0__.useState(undefined);\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        if (timerId.current) {\r\n            clearTimeout(timerId.current);\r\n        }\r\n        const r = rect;\r\n        // Make a local copy of the styles from the current window which will be passed into\r\n        // the floating window. window.document.styleSheets is mutable and we can't guarantee\r\n        // the styles will exist when 'popoutWindow.load' is called below.\r\n        const styles = Array.from(window.document.styleSheets).reduce((result, styleSheet) => {\r\n            let rules = undefined;\r\n            try {\r\n                rules = styleSheet.cssRules;\r\n            }\r\n            catch (e) {\r\n                // styleSheet.cssRules can throw security exception\r\n            }\r\n            try {\r\n                return [\r\n                    ...result,\r\n                    {\r\n                        href: styleSheet.href,\r\n                        type: styleSheet.type,\r\n                        rules: rules ? Array.from(rules).map(rule => rule.cssText) : null,\r\n                    }\r\n                ];\r\n            }\r\n            catch (e) {\r\n                return result;\r\n            }\r\n        }, []);\r\n        popoutWindow.current = window.open(url, id, `left=${r.x},top=${r.y},width=${r.width},height=${r.height}`);\r\n        if (popoutWindow.current !== null) {\r\n            onSetWindow(id, popoutWindow.current);\r\n            // listen for parent unloading to remove all popouts\r\n            window.addEventListener(\"beforeunload\", () => {\r\n                if (popoutWindow.current) {\r\n                    popoutWindow.current.close();\r\n                    popoutWindow.current = null;\r\n                }\r\n            });\r\n            popoutWindow.current.addEventListener(\"load\", () => {\r\n                const popoutDocument = popoutWindow.current.document;\r\n                popoutDocument.title = title;\r\n                const popoutContent = popoutDocument.createElement(\"div\");\r\n                popoutContent.className = _Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;\r\n                popoutDocument.body.appendChild(popoutContent);\r\n                copyStyles(popoutDocument, styles).then(() => {\r\n                    setContent(popoutContent);\r\n                });\r\n                // listen for popout unloading (needs to be after load for safari)\r\n                popoutWindow.current.addEventListener(\"beforeunload\", () => {\r\n                    onCloseWindow(id);\r\n                });\r\n            });\r\n        }\r\n        else {\r\n            console.warn(`Unable to open window ${url}`);\r\n            onCloseWindow(id);\r\n        }\r\n        return () => {\r\n            // delay so refresh will close window\r\n            timerId.current = setTimeout(() => {\r\n                if (popoutWindow.current) {\r\n                    popoutWindow.current.close();\r\n                    popoutWindow.current = null;\r\n                }\r\n            }, 0);\r\n        };\r\n    }, []);\r\n    if (content !== undefined) {\r\n        return (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, content);\r\n    }\r\n    else {\r\n        return null;\r\n    }\r\n};\r\n/** @internal */\r\nfunction copyStyles(doc, styleSheets) {\r\n    const head = doc.head;\r\n    const promises = [];\r\n    for (const styleSheet of styleSheets) {\r\n        if (styleSheet.href) {\r\n            // prefer links since they will keep paths to images etc\r\n            const styleElement = doc.createElement(\"link\");\r\n            styleElement.type = styleSheet.type;\r\n            styleElement.rel = \"stylesheet\";\r\n            styleElement.href = styleSheet.href;\r\n            head.appendChild(styleElement);\r\n            promises.push(new Promise((resolve, reject) => {\r\n                styleElement.onload = () => resolve(true);\r\n            }));\r\n        }\r\n        else {\r\n            if (styleSheet.rules) {\r\n                const style = doc.createElement(\"style\");\r\n                for (const rule of styleSheet.rules) {\r\n                    style.appendChild(doc.createTextNode(rule));\r\n                }\r\n                head.appendChild(style);\r\n            }\r\n        }\r\n    }\r\n    return Promise.all(promises);\r\n}\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/FloatingWindow.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"FloatingWindow\": () => (/* binding */ FloatingWindow)\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 _Types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n\r\n\r\n\r\n/** @internal */\r\nconst FloatingWindow = (props) => {\r\n    const { title, id, url, rect, onCloseWindow, onSetWindow, children } = props;\r\n    const popoutWindow = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const timerId = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const [content, setContent] = react__WEBPACK_IMPORTED_MODULE_0__.useState(undefined);\r\n    react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {\r\n        if (timerId.current) {\r\n            clearTimeout(timerId.current);\r\n        }\r\n        let isMounted = true;\r\n        const r = rect;\r\n        // Make a local copy of the styles from the current window which will be passed into\r\n        // the floating window. window.document.styleSheets is mutable and we can't guarantee\r\n        // the styles will exist when 'popoutWindow.load' is called below.\r\n        const styles = Array.from(window.document.styleSheets).reduce((result, styleSheet) => {\r\n            let rules = undefined;\r\n            try {\r\n                rules = styleSheet.cssRules;\r\n            }\r\n            catch (e) {\r\n                // styleSheet.cssRules can throw security exception\r\n            }\r\n            try {\r\n                return [\r\n                    ...result,\r\n                    {\r\n                        href: styleSheet.href,\r\n                        type: styleSheet.type,\r\n                        rules: rules ? Array.from(rules).map(rule => rule.cssText) : null,\r\n                    }\r\n                ];\r\n            }\r\n            catch (e) {\r\n                return result;\r\n            }\r\n        }, []);\r\n        popoutWindow.current = window.open(url, id, `left=${r.x},top=${r.y},width=${r.width},height=${r.height}`);\r\n        if (popoutWindow.current !== null) {\r\n            onSetWindow(id, popoutWindow.current);\r\n            // listen for parent unloading to remove all popouts\r\n            window.addEventListener(\"beforeunload\", () => {\r\n                if (popoutWindow.current) {\r\n                    popoutWindow.current.close();\r\n                    popoutWindow.current = null;\r\n                }\r\n            });\r\n            popoutWindow.current.addEventListener(\"load\", () => {\r\n                if (isMounted) {\r\n                    const popoutDocument = popoutWindow.current.document;\r\n                    popoutDocument.title = title;\r\n                    const popoutContent = popoutDocument.createElement(\"div\");\r\n                    popoutContent.className = _Types__WEBPACK_IMPORTED_MODULE_2__.CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;\r\n                    popoutDocument.body.appendChild(popoutContent);\r\n                    copyStyles(popoutDocument, styles).then(() => {\r\n                        setContent(popoutContent);\r\n                    });\r\n                    // listen for popout unloading (needs to be after load for safari)\r\n                    popoutWindow.current.addEventListener(\"beforeunload\", () => {\r\n                        onCloseWindow(id);\r\n                    });\r\n                }\r\n            });\r\n        }\r\n        else {\r\n            console.warn(`Unable to open window ${url}`);\r\n            onCloseWindow(id);\r\n        }\r\n        return () => {\r\n            isMounted = false;\r\n            // delay so refresh will close window\r\n            timerId.current = setTimeout(() => {\r\n                if (popoutWindow.current) {\r\n                    popoutWindow.current.close();\r\n                    popoutWindow.current = null;\r\n                }\r\n            }, 0);\r\n        };\r\n    }, []);\r\n    if (content !== undefined) {\r\n        return (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, content);\r\n    }\r\n    else {\r\n        return null;\r\n    }\r\n};\r\n/** @internal */\r\nfunction copyStyles(doc, styleSheets) {\r\n    const head = doc.head;\r\n    const promises = [];\r\n    for (const styleSheet of styleSheets) {\r\n        if (styleSheet.href) {\r\n            // prefer links since they will keep paths to images etc\r\n            const styleElement = doc.createElement(\"link\");\r\n            styleElement.type = styleSheet.type;\r\n            styleElement.rel = \"stylesheet\";\r\n            styleElement.href = styleSheet.href;\r\n            head.appendChild(styleElement);\r\n            promises.push(new Promise((resolve, reject) => {\r\n                styleElement.onload = () => resolve(true);\r\n            }));\r\n        }\r\n        else {\r\n            if (styleSheet.rules) {\r\n                const style = doc.createElement(\"style\");\r\n                for (const rule of styleSheet.rules) {\r\n                    style.appendChild(doc.createTextNode(rule));\r\n                }\r\n                head.appendChild(style);\r\n            }\r\n        }\r\n    }\r\n    return Promise.all(promises);\r\n}\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/FloatingWindow.tsx?");
 
 /***/ }),
 
@@ -416,7 +416,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/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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst TabSet = (props) => {\r\n    const { node, layout, iconFactory, titleFactory, icons, path } = props;\r\n    const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const tabbarInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, toolbarRef, stickyButtonsRef);\r\n    const onOverflowClick = (event) => {\r\n        const callback = layout.getShowOverflowMenu();\r\n        if (callback !== undefined) {\r\n            callback(node, event, hiddenTabs, onOverflowItemSelect);\r\n        }\r\n        else {\r\n            const element = overflowbuttonRef.current;\r\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onOverflowItemSelect = (item) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\r\n        userControlledLeft.current = false;\r\n    };\r\n    const onMouseDown = (event) => {\r\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n            let name = node.getName();\r\n            if (name === undefined) {\r\n                name = \"\";\r\n            }\r\n            else {\r\n                name = \": \" + name;\r\n            }\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId()));\r\n            if (!layout.getEditingTab()) {\r\n                const message = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Move_Tabset, name);\r\n                if (node.getModel().getMaximizedTabset() !== undefined) {\r\n                    layout.dragStart(event, message, node, false, (event2) => undefined, onDoubleClick);\r\n                }\r\n                else {\r\n                    layout.dragStart(event, message, node, node.isEnableDrag(), (event2) => undefined, onDoubleClick);\r\n                }\r\n            }\r\n        }\r\n    };\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(node, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(node, event);\r\n    };\r\n    const onInterceptMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    const onMaximizeToggle = (event) => {\r\n        if (node.canMaximize()) {\r\n            layout.maximize(node);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onClose = (event) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\r\n        event.stopPropagation();\r\n    };\r\n    const onFloatTab = (event) => {\r\n        if (selectedTabNode !== undefined) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.floatTab(selectedTabNode.getId()));\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onDoubleClick = (event) => {\r\n        if (node.canMaximize()) {\r\n            layout.maximize(node);\r\n        }\r\n    };\r\n    // Start Render\r\n    const cm = layout.getClassName;\r\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\r\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\r\n        tabbarInnerRef.current.scrollLeft = 0;\r\n    }\r\n    const selectedTabNode = node.getSelectedNode();\r\n    let style = node._styleWithPosition();\r\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\r\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_8__.hideElement)(style, node.getModel().isUseVisibility());\r\n    }\r\n    const tabs = [];\r\n    if (node.isEnableTabStrip()) {\r\n        for (let i = 0; i < node.getChildren().length; i++) {\r\n            const child = node.getChildren()[i];\r\n            let isSelected = node.getSelected() === i;\r\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, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\r\n            if (i < node.getChildren().length - 1) {\r\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) }));\r\n            }\r\n        }\r\n    }\r\n    const showHeader = node.getName() !== undefined;\r\n    let stickyButtons = [];\r\n    let buttons = [];\r\n    let headerButtons = [];\r\n    // allow customization of header contents and buttons\r\n    const renderState = { headerContent: node.getName(), stickyButtons, buttons, headerButtons };\r\n    layout.customizeTabSet(node, renderState);\r\n    const headerContent = renderState.headerContent;\r\n    stickyButtons = renderState.stickyButtons;\r\n    buttons = renderState.buttons;\r\n    headerButtons = renderState.headerButtons;\r\n    if (stickyButtons.length > 0) {\r\n        if (tabsTruncated) {\r\n            buttons = [...stickyButtons, ...buttons];\r\n        }\r\n        else {\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\r\n        }\r\n    }\r\n    let toolbar;\r\n    if (hiddenTabs.length > 0) {\r\n        const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\r\n        let overflowContent;\r\n        if (typeof icons.more === \"function\") {\r\n            overflowContent = icons.more(node, hiddenTabs);\r\n        }\r\n        else {\r\n            overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n                icons.more,\r\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\r\n        }\r\n        buttons.push(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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\r\n    }\r\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\r\n        const floatTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Float_Tab);\r\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, 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: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\r\n    }\r\n    if (node.canMaximize()) {\r\n        const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\r\n        const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\r\n        const btns = showHeader ? headerButtons : buttons;\r\n        btns.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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ?\r\n            (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\r\n            (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\r\n    }\r\n    if (!node.isMaximized() && node.isEnableClose()) {\r\n        const title = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\r\n        const btns = showHeader ? headerButtons : buttons;\r\n        btns.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: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\r\n    }\r\n    toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\r\n    let header;\r\n    let tabStrip;\r\n    let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\r\n    if (node.getClassNameTabStrip() !== undefined) {\r\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\r\n    }\r\n    tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\r\n    if (node.isActive() && !showHeader) {\r\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n    }\r\n    if (node.isMaximized() && !showHeader) {\r\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n    }\r\n    if (showHeader) {\r\n        const headerToolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, headerButtons));\r\n        let tabHeaderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER);\r\n        if (node.isActive()) {\r\n            tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n        }\r\n        if (node.isMaximized()) {\r\n            tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n        }\r\n        if (node.getClassNameHeader() !== undefined) {\r\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\r\n        }\r\n        header = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\r\n            headerToolbar));\r\n    }\r\n    const tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\r\n    tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabbarInnerRef, 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()) },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { left: position }, 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)),\r\n        toolbar));\r\n    style = layout.styleFont(style);\r\n    var placeHolder = undefined;\r\n    if (node.getChildren().length === 0) {\r\n        const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\r\n        if (placeHolderCallback) {\r\n            placeHolder = placeHolderCallback(node);\r\n        }\r\n    }\r\n    const center = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, placeHolder);\r\n    var content;\r\n    if (node.getTabLocation() === \"top\") {\r\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            header,\r\n            tabStrip,\r\n            center);\r\n    }\r\n    else {\r\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            header,\r\n            center,\r\n            tabStrip);\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel }, content));\r\n};\r\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/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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/** @internal */\r\nconst TabSet = (props) => {\r\n    const { node, layout, iconFactory, titleFactory, icons, path } = props;\r\n    const toolbarRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const overflowbuttonRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const tabbarInnerRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const stickyButtonsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\r\n    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = (0,_TabOverflowHook__WEBPACK_IMPORTED_MODULE_5__.useTabOverflow)(node, _Orientation__WEBPACK_IMPORTED_MODULE_6__.Orientation.HORZ, toolbarRef, stickyButtonsRef);\r\n    const onOverflowClick = (event) => {\r\n        const callback = layout.getShowOverflowMenu();\r\n        if (callback !== undefined) {\r\n            callback(node, event, hiddenTabs, onOverflowItemSelect);\r\n        }\r\n        else {\r\n            const element = overflowbuttonRef.current;\r\n            (0,_PopupMenu__WEBPACK_IMPORTED_MODULE_3__.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onOverflowItemSelect = (item) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.selectTab(item.node.getId()));\r\n        userControlledLeft.current = false;\r\n    };\r\n    const onMouseDown = (event) => {\r\n        if (!(0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n            let name = node.getName();\r\n            if (name === undefined) {\r\n                name = \"\";\r\n            }\r\n            else {\r\n                name = \": \" + name;\r\n            }\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.setActiveTabset(node.getId()));\r\n            if (!layout.getEditingTab()) {\r\n                const message = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Move_Tabset, name);\r\n                if (node.getModel().getMaximizedTabset() !== undefined) {\r\n                    layout.dragStart(event, message, node, false, (event2) => undefined, onDoubleClick);\r\n                }\r\n                else {\r\n                    layout.dragStart(event, message, node, node.isEnableDrag(), (event2) => undefined, onDoubleClick);\r\n                }\r\n            }\r\n        }\r\n    };\r\n    const onAuxMouseClick = (event) => {\r\n        if ((0,_Utils__WEBPACK_IMPORTED_MODULE_8__.isAuxMouseEvent)(event)) {\r\n            layout.auxMouseClick(node, event);\r\n        }\r\n    };\r\n    const onContextMenu = (event) => {\r\n        layout.showContextMenu(node, event);\r\n    };\r\n    const onInterceptMouseDown = (event) => {\r\n        event.stopPropagation();\r\n    };\r\n    const onMaximizeToggle = (event) => {\r\n        if (node.canMaximize()) {\r\n            layout.maximize(node);\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onClose = (event) => {\r\n        layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.deleteTabset(node.getId()));\r\n        event.stopPropagation();\r\n    };\r\n    const onFloatTab = (event) => {\r\n        if (selectedTabNode !== undefined) {\r\n            layout.doAction(_model_Actions__WEBPACK_IMPORTED_MODULE_2__.Actions.floatTab(selectedTabNode.getId()));\r\n        }\r\n        event.stopPropagation();\r\n    };\r\n    const onDoubleClick = (event) => {\r\n        if (node.canMaximize()) {\r\n            layout.maximize(node);\r\n        }\r\n    };\r\n    // Start Render\r\n    const cm = layout.getClassName;\r\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\r\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\r\n        tabbarInnerRef.current.scrollLeft = 0;\r\n    }\r\n    const selectedTabNode = node.getSelectedNode();\r\n    let style = node._styleWithPosition();\r\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\r\n        (0,_Utils__WEBPACK_IMPORTED_MODULE_8__.hideElement)(style, node.getModel().isUseVisibility());\r\n    }\r\n    const tabs = [];\r\n    if (node.isEnableTabStrip()) {\r\n        for (let i = 0; i < node.getChildren().length; i++) {\r\n            const child = node.getChildren()[i];\r\n            let isSelected = node.getSelected() === i;\r\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, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\r\n            if (i < node.getChildren().length - 1) {\r\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) }));\r\n            }\r\n        }\r\n    }\r\n    const showHeader = node.getName() !== undefined;\r\n    let stickyButtons = [];\r\n    let buttons = [];\r\n    let headerButtons = [];\r\n    // allow customization of header contents and buttons\r\n    const renderState = { headerContent: node.getName(), stickyButtons, buttons, headerButtons };\r\n    layout.customizeTabSet(node, renderState);\r\n    const headerContent = renderState.headerContent;\r\n    stickyButtons = renderState.stickyButtons;\r\n    buttons = renderState.buttons;\r\n    headerButtons = renderState.headerButtons;\r\n    if (hiddenTabs.length > 0) {\r\n        const overflowTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Overflow_Menu_Tooltip);\r\n        let overflowContent;\r\n        if (typeof icons.more === \"function\") {\r\n            overflowContent = icons.more(node, hiddenTabs);\r\n        }\r\n        else {\r\n            overflowContent = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n                icons.more,\r\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\r\n        }\r\n        buttons.unshift(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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\r\n    }\r\n    if (stickyButtons.length > 0) {\r\n        if (tabsTruncated) {\r\n            buttons = [...stickyButtons, ...buttons];\r\n        }\r\n        else {\r\n            tabs.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\r\n        }\r\n    }\r\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\r\n        const floatTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Float_Tab);\r\n        buttons.push(react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, 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: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : icons.popout));\r\n    }\r\n    if (node.canMaximize()) {\r\n        const minTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Restore);\r\n        const maxTitle = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Maximize);\r\n        const btns = showHeader ? headerButtons : buttons;\r\n        btns.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, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ?\r\n            (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\r\n            (typeof icons.maximize === \"function\") ? icons.maximize(node) : icons.maximize));\r\n    }\r\n    if (!node.isMaximized() && node.isEnableClose()) {\r\n        const title = layout.i18nName(_I18nLabel__WEBPACK_IMPORTED_MODULE_1__.I18nLabel.Close_Tabset);\r\n        const btns = showHeader ? headerButtons : buttons;\r\n        btns.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: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\r\n    }\r\n    const toolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, buttons));\r\n    let header;\r\n    let tabStrip;\r\n    let tabStripClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\r\n    if (node.getClassNameTabStrip() !== undefined) {\r\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\r\n    }\r\n    tabStripClasses += \" \" + _Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\r\n    if (node.isActive() && !showHeader) {\r\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n    }\r\n    if (node.isMaximized() && !showHeader) {\r\n        tabStripClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n    }\r\n    if (showHeader) {\r\n        const headerToolbar = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: (e) => { e.preventDefault(); } }, headerButtons));\r\n        let tabHeaderClasses = cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER);\r\n        if (node.isActive()) {\r\n            tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\r\n        }\r\n        if (node.isMaximized()) {\r\n            tabHeaderClasses += \" \" + cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\r\n        }\r\n        if (node.getClassNameHeader() !== undefined) {\r\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\r\n        }\r\n        header = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\r\n            headerToolbar));\r\n    }\r\n    const tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\r\n    tabStrip = (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\r\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: tabbarInnerRef, 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()) },\r\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { left: position }, 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)),\r\n        toolbar));\r\n    style = layout.styleFont(style);\r\n    var placeHolder = undefined;\r\n    if (node.getChildren().length === 0) {\r\n        const placeHolderCallback = layout.getTabSetPlaceHolderCallback();\r\n        if (placeHolderCallback) {\r\n            placeHolder = placeHolderCallback(node);\r\n        }\r\n    }\r\n    const center = react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, placeHolder);\r\n    var content;\r\n    if (node.getTabLocation() === \"top\") {\r\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            header,\r\n            tabStrip,\r\n            center);\r\n    }\r\n    else {\r\n        content = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\r\n            header,\r\n            center,\r\n            tabStrip);\r\n    }\r\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(_Types__WEBPACK_IMPORTED_MODULE_7__.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel }, content));\r\n};\r\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
 
 /***/ }),