flexlayout-react 0.6.1 → 0.6.5

package/lib/view/Layout.js

@@ -25,10 +25,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = void 0;
@@ -50,7 +54,7 @@ var TabSet_1 = require("./TabSet");
 var FloatingWindow_1 = require("./FloatingWindow");
 var FloatingWindowTab_1 = require("./FloatingWindowTab");
 var TabFloating_1 = require("./TabFloating");
-var __1 = require("..");
+var Orientation_1 = require("../Orientation");
 var Icons_1 = require("./Icons");
 var TabButtonStamp_1 = require("./TabButtonStamp");
 var defaultIcons = {
@@ -64,12 +68,12 @@ var defaultIcons = {
 // Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do
 // not work on any version if IE or the original Edge browser
 // Assume any recent desktop browser not IE or original Edge will work
-/** @hidden @internal */
+/** @internal */
 // @ts-ignore
 var isIEorEdge = typeof window !== "undefined" && (window.document.documentMode || /Edge\//.test(window.navigator.userAgent));
-/** @hidden @internal */
+/** @internal */
 var isDesktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
-/** @hidden @internal */
+/** @internal */
 var defaultSupportsPopout = isDesktop && !isIEorEdge;
 /**
  * A React component that hosts a multi-tabbed layout
@@ -78,34 +82,34 @@ var Layout = /** @class */ (function (_super) {
     __extends(Layout, _super);
     function Layout(props) {
         var _this = _super.call(this, props) || this;
-        /** @hidden @internal */
+        /** @internal */
         _this.firstMove = false;
-        /** @hidden @internal */
+        /** @internal */
         _this.dragRectRendered = true;
-        /** @hidden @internal */
+        /** @internal */
         _this.dragDivText = undefined;
-        /** @hidden @internal */
+        /** @internal */
         _this.edgeRectLength = 100;
-        /** @hidden @internal */
+        /** @internal */
         _this.edgeRectWidth = 10;
-        /** @hidden @internal */
+        /** @internal */
         _this.edgesShown = false;
-        /** @hidden @internal */
+        /** @internal */
         _this.onModelChange = function () {
             _this.forceUpdate();
             if (_this.props.onModelChange) {
                 _this.props.onModelChange(_this.props.model);
             }
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.updateRect = function (domRect) {
             if (domRect === void 0) { domRect = _this.getDomRect(); }
-            var rect = new Rect_1.default(0, 0, domRect.width, domRect.height);
+            var rect = new Rect_1.Rect(0, 0, domRect.width, domRect.height);
             if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {
                 _this.setState({ rect: rect });
             }
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.updateLayoutMetrics = function () {
             if (_this.findHeaderBarSizeRef.current) {
                 var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;
@@ -126,7 +130,7 @@ var Layout = /** @class */ (function (_super) {
                 }
             }
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.getClassName = function (defaultClassName) {
             if (_this.props.classNameMapper === undefined) {
                 return defaultClassName;
@@ -135,9 +139,9 @@ var Layout = /** @class */ (function (_super) {
                 return _this.props.classNameMapper(defaultClassName);
             }
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.onCloseWindow = function (id) {
-            _this.doAction(Actions_1.default.unFloatTab(id));
+            _this.doAction(Actions_1.Actions.unFloatTab(id));
             try {
                 _this.props.model.getNodeById(id)._setWindow(undefined);
             }
@@ -145,11 +149,11 @@ var Layout = /** @class */ (function (_super) {
                 // catch incase it was a model change
             }
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.onSetWindow = function (id, window) {
             _this.props.model.getNodeById(id)._setWindow(window);
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.onCancelAdd = function () {
             var _a, _b;
             var rootdiv = _this.selfRef.current;
@@ -166,11 +170,11 @@ var Layout = /** @class */ (function (_super) {
             catch (e) {
                 console.error(e);
             }
-            DragDrop_1.default.instance.hideGlass();
+            DragDrop_1.DragDrop.instance.hideGlass();
             _this.newTabJson = undefined;
             _this.customDrop = undefined;
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.onCancelDrag = function (wasDragging) {
             var _a, _b;
             if (wasDragging) {
@@ -196,36 +200,36 @@ var Layout = /** @class */ (function (_super) {
                 catch (e) {
                     console.error(e);
                 }
-                DragDrop_1.default.instance.hideGlass();
+                DragDrop_1.DragDrop.instance.hideGlass();
                 _this.newTabJson = undefined;
                 _this.customDrop = undefined;
             }
-            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });
+            _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.onDragDivMouseDown = function (event) {
             event.preventDefault();
-            _this.dragStart(event, _this.dragDivText, TabNode_1.default._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);
+            _this.dragStart(event, _this.dragDivText, TabNode_1.TabNode._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {
             if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {
-                DragDrop_1.default.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);
+                DragDrop_1.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);
             }
             else {
                 _this.dragNode = node;
                 _this.dragDivText = dragDivText;
-                DragDrop_1.default.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);
+                DragDrop_1.DragDrop.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);
             }
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.dragRectRender = function (text, node, json, onRendered) {
             var content;
             if (text !== undefined) {
                 content = React.createElement("div", { style: { whiteSpace: "pre" } }, text.replace("<br>", "\n"));
             }
             else {
-                if (node && node instanceof TabNode_1.default) {
+                if (node && node instanceof TabNode_1.TabNode) {
                     content = (React.createElement(TabButtonStamp_1.TabButtonStamp, { node: node, layout: _this, iconFactory: _this.props.iconFactory, titleFactory: _this.props.titleFactory }));
                 }
             }
@@ -247,14 +251,16 @@ var Layout = /** @class */ (function (_super) {
                     onRendered === null || onRendered === void 0 ? void 0 : onRendered();
                 } }, content), _this.dragDiv);
         };
+        /** @internal */
         _this.showPortal = function (control, element) {
             var portal = ReactDOM.createPortal(control, element);
             _this.setState({ portal: portal });
         };
+        /** @internal */
         _this.hidePortal = function () {
             _this.setState({ portal: undefined });
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.onDragStart = function () {
             _this.dropInfo = undefined;
             _this.customDrop = undefined;
@@ -272,17 +278,17 @@ var Layout = /** @class */ (function (_super) {
             }
             // add edge indicators
             _this.showEdges(rootdiv);
-            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.default && _this.dragNode.getTabRect() !== undefined) {
+            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.TabNode && _this.dragNode.getTabRect() !== undefined) {
                 _this.dragNode.getTabRect().positionElement(_this.outlineDiv);
             }
             _this.firstMove = true;
             return true;
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.onDragMove = function (event) {
             if (_this.firstMove === false) {
                 var speed = _this.props.model._getAttribute("tabDragSpeed");
-                _this.outlineDiv.style.transition = "top " + speed + "s, left " + speed + "s, width " + speed + "s, height " + speed + "s";
+                _this.outlineDiv.style.transition = "top ".concat(speed, "s, left ").concat(speed, "s, width ").concat(speed, "s, height ").concat(speed, "s");
             }
             _this.firstMove = false;
             var clientRect = _this.selfRef.current.getBoundingClientRect();
@@ -317,7 +323,7 @@ var Layout = /** @class */ (function (_super) {
                 }
             }
         };
-        /** @hidden @internal */
+        /** @internal */
         _this.onDragEnd = function (event) {
             var rootdiv = _this.selfRef.current;
             rootdiv.removeChild(_this.outlineDiv);
@@ -325,7 +331,7 @@ var Layout = /** @class */ (function (_super) {
             _this.dragDiv = undefined;
             _this.hidePortal();
             _this.hideEdges(rootdiv);
-            DragDrop_1.default.instance.hideGlass();
+            DragDrop_1.DragDrop.instance.hideGlass();
             if (_this.dropInfo) {
                 if (_this.customDrop) {
                     _this.newTabJson = undefined;
@@ -342,7 +348,7 @@ var Layout = /** @class */ (function (_super) {
                     }
                 }
                 else if (_this.newTabJson !== undefined) {
-                    var newNode = _this.doAction(Actions_1.default.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));
+                    var newNode = _this.doAction(Actions_1.Actions.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));
                     if (_this.fnNewNodeDropped != null) {
                         _this.fnNewNodeDropped(newNode, event);
                         _this.fnNewNodeDropped = undefined;
@@ -350,10 +356,10 @@ var Layout = /** @class */ (function (_super) {
                     _this.newTabJson = undefined;
                 }
                 else if (_this.dragNode !== undefined) {
-                    _this.doAction(Actions_1.default.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));
+                    _this.doAction(Actions_1.Actions.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));
                 }
             }
-            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });
+            _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });
         };
         _this.props.model._setChangeListener(_this.onModelChange);
         _this.tabIds = [];
@@ -366,17 +372,17 @@ var Layout = /** @class */ (function (_super) {
         _this.icons = __assign(__assign({}, defaultIcons), props.icons);
         _this.firstRender = true;
         _this.state = {
-            rect: new Rect_1.default(0, 0, 0, 0),
+            rect: new Rect_1.Rect(0, 0, 0, 0),
             calculatedHeaderBarSize: 25,
             calculatedTabBarSize: 26,
             calculatedBorderBarSize: 30,
             editingTab: undefined,
-            showHiddenBorder: DockLocation_1.default.CENTER,
+            showHiddenBorder: DockLocation_1.DockLocation.CENTER,
         };
         _this.onDragEnter = _this.onDragEnter.bind(_this);
         return _this;
     }
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.styleFont = function (style) {
         if (this.props.font) {
             if (this.selfRef.current) {
@@ -396,7 +402,7 @@ var Layout = /** @class */ (function (_super) {
         }
         return style;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.doAction = function (action) {
         if (this.props.onAction !== undefined) {
             var outcome = this.props.onAction(action);
@@ -409,7 +415,7 @@ var Layout = /** @class */ (function (_super) {
             return this.props.model.doAction(action);
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.componentDidMount = function () {
         var _this = this;
         this.updateRect();
@@ -422,7 +428,7 @@ var Layout = /** @class */ (function (_super) {
         });
         this.resizeObserver.observe(this.selfRef.current);
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.componentDidUpdate = function () {
         this.updateLayoutMetrics();
         if (this.props.model !== this.previousModel) {
@@ -434,56 +440,55 @@ var Layout = /** @class */ (function (_super) {
         }
         // console.log("Layout time: " + this.layoutTime + "ms Render time: " + (Date.now() - this.start) + "ms");
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.getCurrentDocument = function () {
         return this.currentDocument;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.getDomRect = function () {
         return this.selfRef.current.getBoundingClientRect();
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.getRootDiv = function () {
         return this.selfRef.current;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.isSupportsPopout = function () {
         return this.supportsPopout;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.isRealtimeResize = function () {
         var _a;
         return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.onTabDrag = function () {
         var _a, _b;
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
-        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args));
+        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args, false));
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.getPopoutURL = function () {
         return this.popoutURL;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.componentWillUnmount = function () {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.setEditingTab = function (tabNode) {
         this.setState({ editingTab: tabNode });
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.getEditingTab = function () {
         return this.state.editingTab;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.render = function () {
-        var _this = this;
         // first render will be used to find the size (via selfRef)
         if (this.firstRender) {
             this.firstRender = false;
@@ -511,19 +516,21 @@ var Layout = /** @class */ (function (_super) {
         var nextTopIds = [];
         var nextTopIdsMap = {};
         // Keep any previous tabs in the same DOM order as before, removing any that have been deleted
-        this.tabIds.forEach(function (t) {
+        for (var _i = 0, _a = this.tabIds; _i < _a.length; _i++) {
+            var t = _a[_i];
             if (tabComponents[t]) {
                 nextTopIds.push(t);
                 nextTopIdsMap[t] = t;
             }
-        });
+        }
         this.tabIds = nextTopIds;
         // Add tabs that have been added to the DOM
-        Object.keys(tabComponents).forEach(function (t) {
+        for (var _b = 0, _c = Object.keys(tabComponents); _b < _c.length; _b++) {
+            var t = _c[_b];
             if (!nextTopIdsMap[t]) {
-                _this.tabIds.push(t);
+                this.tabIds.push(t);
             }
-        });
+        }
         // this.layoutTime = (Date.now() - this.start);
         return (React.createElement("div", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },
             tabSetComponents,
@@ -536,7 +543,7 @@ var Layout = /** @class */ (function (_super) {
             this.metricsElements(),
             this.state.portal));
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.metricsElements = function () {
         // used to measure the tab and border tab sizes
         var fontStyle = this.styleFont({ visibility: "hidden" });
@@ -545,23 +552,23 @@ var Layout = /** @class */ (function (_super) {
             React.createElement("div", { key: "findTabBarSize", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, "FindTabBarSize"),
             React.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, "FindBorderBarSize")));
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {
         for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {
             var border = _a[_i];
-            var borderPath = "/border/" + border.getLocation().getName();
+            var borderPath = "/border/".concat(border.getLocation().getName());
             if (border.isShowing()) {
-                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: "border_" + border.getLocation().getName(), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));
+                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: "border_".concat(border.getLocation().getName()), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));
                 var drawChildren = border._getDrawChildren();
                 var i = 0;
                 var tabCount = 0;
                 for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {
                     var child = drawChildren_1[_b];
-                    if (child instanceof SplitterNode_1.default) {
+                    if (child instanceof SplitterNode_1.SplitterNode) {
                         var path = borderPath + "/s";
                         splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));
                     }
-                    else if (child instanceof TabNode_1.default) {
+                    else if (child instanceof TabNode_1.TabNode) {
                         var path = borderPath + "/t" + tabCount++;
                         if (this.supportsPopout && child.isFloating()) {
                             var rect = this._getScreenRect(child);
@@ -578,7 +585,7 @@ var Layout = /** @class */ (function (_super) {
             }
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {
         var drawChildren = node._getDrawChildren();
         var splitterCount = 0;
@@ -586,16 +593,16 @@ var Layout = /** @class */ (function (_super) {
         var rowCount = 0;
         for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {
             var child = _a[_i];
-            if (child instanceof SplitterNode_1.default) {
+            if (child instanceof SplitterNode_1.SplitterNode) {
                 var newPath = path + "/s" + (splitterCount++);
                 splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));
             }
-            else if (child instanceof TabSetNode_1.default) {
+            else if (child instanceof TabSetNode_1.TabSetNode) {
                 var newPath = path + "/ts" + (rowCount++);
                 tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));
                 this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
             }
-            else if (child instanceof TabNode_1.default) {
+            else if (child instanceof TabNode_1.TabNode) {
                 var newPath = path + "/t" + (tabCount++);
                 var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];
                 if (selectedTab === undefined) {
@@ -614,12 +621,12 @@ var Layout = /** @class */ (function (_super) {
             }
             else {
                 // is row
-                var newPath = path + ((child.getOrientation() === __1.Orientation.HORZ) ? "/r" : "/c") + (rowCount++);
+                var newPath = path + ((child.getOrientation() === Orientation_1.Orientation.HORZ) ? "/r" : "/c") + (rowCount++);
                 this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
             }
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype._getScreenRect = function (node) {
         var rect = node.getRect().clone();
         var bodyRect = this.selfRef.current.getBoundingClientRect();
@@ -637,7 +644,7 @@ var Layout = /** @class */ (function (_super) {
     Layout.prototype.addTabToTabSet = function (tabsetId, json) {
         var tabsetNode = this.props.model.getNodeById(tabsetId);
         if (tabsetNode !== undefined) {
-            this.doAction(Actions_1.default.addNode(json, tabsetId, DockLocation_1.default.CENTER, -1));
+            this.doAction(Actions_1.Actions.addNode(json, tabsetId, DockLocation_1.DockLocation.CENTER, -1));
         }
     };
     /**
@@ -647,7 +654,7 @@ var Layout = /** @class */ (function (_super) {
     Layout.prototype.addTabToActiveTabSet = function (json) {
         var tabsetNode = this.props.model.getActiveTabset();
         if (tabsetNode !== undefined) {
-            this.doAction(Actions_1.default.addNode(json, tabsetNode.getId(), DockLocation_1.default.CENTER, -1));
+            this.doAction(Actions_1.Actions.addNode(json, tabsetNode.getId(), DockLocation_1.DockLocation.CENTER, -1));
         }
     };
     /**
@@ -659,7 +666,7 @@ var Layout = /** @class */ (function (_super) {
     Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {
         this.fnNewNodeDropped = onDrop;
         this.newTabJson = json;
-        this.dragStart(undefined, dragText, TabNode_1.default._fromJson(json, this.props.model, false), true, undefined, undefined);
+        this.dragStart(undefined, dragText, TabNode_1.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);
     };
     /**
      * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you
@@ -673,7 +680,7 @@ var Layout = /** @class */ (function (_super) {
         var _this = this;
         this.fnNewNodeDropped = onDrop;
         this.newTabJson = json;
-        DragDrop_1.default.instance.addGlass(this.onCancelAdd);
+        DragDrop_1.DragDrop.instance.addGlass(this.onCancelAdd);
         this.dragDivText = dragText;
         this.dragDiv = this.currentDocument.createElement("div");
         this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);
@@ -684,7 +691,7 @@ var Layout = /** @class */ (function (_super) {
                 // now it's been rendered into the dom it can be centered
                 _this.dragDiv.style.visibility = "visible";
                 var domRect = _this.dragDiv.getBoundingClientRect();
-                var r = new Rect_1.default(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);
+                var r = new Rect_1.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);
                 r.centerInRect(_this.state.rect);
                 _this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
                 _this.dragDiv.style.left = r.x + "px";
@@ -694,15 +701,15 @@ var Layout = /** @class */ (function (_super) {
         var rootdiv = this.selfRef.current;
         rootdiv.appendChild(this.dragDiv);
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {
         var _this = this;
         var _a, _b, _c;
         var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;
         var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;
         this.customDrop = undefined;
-        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.default ? this.dragNode : undefined);
-        if (dragging && (dropInfo.node instanceof TabSetNode_1.default || dropInfo.node instanceof BorderNode_1.default) && dropInfo.index === -1) {
+        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.TabNode ? this.dragNode : undefined);
+        if (dragging && (dropInfo.node instanceof TabSetNode_1.TabSetNode || dropInfo.node instanceof BorderNode_1.BorderNode) && dropInfo.index === -1) {
             var selected = dropInfo.node.getSelectedNode();
             var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();
             if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {
@@ -711,7 +718,7 @@ var Layout = /** @class */ (function (_super) {
                     var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });
                     if (dest) {
                         customDrop = {
-                            rect: new Rect_1.default(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
+                            rect: new Rect_1.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
                             callback: dest.callback,
                             invalidated: dest.invalidated,
                             dragging: dragging,
@@ -740,7 +747,7 @@ var Layout = /** @class */ (function (_super) {
         else {
             dropInfo.rect.positionElement(this.outlineDiv);
         }
-        DragDrop_1.default.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);
+        DragDrop_1.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);
         this.outlineDiv.style.visibility = "visible";
         try {
             invalidated === null || invalidated === void 0 ? void 0 : invalidated();
@@ -749,53 +756,53 @@ var Layout = /** @class */ (function (_super) {
             console.error(e);
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.onDragEnter = function (event) {
         // DragDrop keeps track of number of dragenters minus the number of
         // dragleaves. Only start a new drag if there isn't one already.
-        if (DragDrop_1.default.instance.isDragging())
+        if (DragDrop_1.DragDrop.instance.isDragging())
             return;
         var drag = this.props.onExternalDrag(event);
         if (drag) {
             // Mimic addTabWithDragAndDrop, but pass in DragEvent
             this.fnNewNodeDropped = drag.onDrop;
             this.newTabJson = drag.json;
-            this.dragStart(event, drag.dragText, TabNode_1.default._fromJson(drag.json, this.props.model, false), true, undefined, undefined);
+            this.dragStart(event, drag.dragText, TabNode_1.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.checkForBorderToShow = function (x, y) {
         var r = this.props.model._getOuterInnerRects().outer;
         var c = r.getCenter();
         var margin = this.edgeRectWidth;
         var offset = this.edgeRectLength / 2;
         var overEdge = false;
-        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.default.CENTER) {
+        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.DockLocation.CENTER) {
             if ((y > c.y - offset && y < c.y + offset) ||
                 (x > c.x - offset && x < c.x + offset)) {
                 overEdge = true;
             }
         }
-        var location = DockLocation_1.default.CENTER;
+        var location = DockLocation_1.DockLocation.CENTER;
         if (!overEdge) {
             if (x <= r.x + margin) {
-                location = DockLocation_1.default.LEFT;
+                location = DockLocation_1.DockLocation.LEFT;
             }
             else if (x >= r.getRight() - margin) {
-                location = DockLocation_1.default.RIGHT;
+                location = DockLocation_1.DockLocation.RIGHT;
             }
             else if (y <= r.y + margin) {
-                location = DockLocation_1.default.TOP;
+                location = DockLocation_1.DockLocation.TOP;
             }
             else if (y >= r.getBottom() - margin) {
-                location = DockLocation_1.default.BOTTOM;
+                location = DockLocation_1.DockLocation.BOTTOM;
             }
         }
         if (location !== this.state.showHiddenBorder) {
             this.setState({ showHiddenBorder: location });
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.showEdges = function (rootdiv) {
         if (this.props.model.isEnableEdgeDock()) {
             var length_1 = this.edgeRectLength + "px";
@@ -833,7 +840,7 @@ var Layout = /** @class */ (function (_super) {
             this.edgesShown = true;
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.repositionEdges = function (domRect) {
         if (this.props.model.isEnableEdgeDock()) {
             var r = this.centerRect;
@@ -847,7 +854,7 @@ var Layout = /** @class */ (function (_super) {
             this.edgeRightDiv.style.right = domRect.width - r.getRight() + "px";
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.hideEdges = function (rootdiv) {
         if (this.props.model.isEnableEdgeDock()) {
             try {
@@ -860,23 +867,23 @@ var Layout = /** @class */ (function (_super) {
         }
         this.edgesShown = false;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.maximize = function (tabsetNode) {
-        this.doAction(Actions_1.default.maximizeToggle(tabsetNode.getId()));
+        this.doAction(Actions_1.Actions.maximizeToggle(tabsetNode.getId()));
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.customizeTab = function (tabNode, renderValues) {
         if (this.props.onRenderTab) {
             this.props.onRenderTab(tabNode, renderValues);
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {
         if (this.props.onRenderTabSet) {
             this.props.onRenderTabSet(tabSetNode, renderValues);
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.i18nName = function (id, param) {
         var message;
         if (this.props.i18nMapper) {
@@ -887,17 +894,21 @@ var Layout = /** @class */ (function (_super) {
         }
         return message;
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {
         return this.props.onRenderFloatingTabPlaceholder;
     };
-    /** @hidden @internal */
+    /** @internal */
+    Layout.prototype.getShowOverflowMenu = function () {
+        return this.props.onShowOverflowMenu;
+    };
+    /** @internal */
     Layout.prototype.showContextMenu = function (node, event) {
         if (this.props.onContextMenu) {
             this.props.onContextMenu(node, event);
         }
     };
-    /** @hidden @internal */
+    /** @internal */
     Layout.prototype.auxMouseClick = function (node, event) {
         if (this.props.onAuxMouseClick) {
             this.props.onAuxMouseClick(node, event);
@@ -906,7 +917,7 @@ var Layout = /** @class */ (function (_super) {
     return Layout;
 }(React.Component));
 exports.Layout = Layout;
-/** @hidden @internal */
+/** @internal */
 var DragRectRenderWrapper = function (props) {
     React.useEffect(function () {
         var _a;
@@ -914,5 +925,4 @@ var DragRectRenderWrapper = function (props) {
     }, [props]);
     return (React.createElement(React.Fragment, null, props.children));
 };
-exports.default = Layout;
 //# sourceMappingURL=Layout.js.map