flexlayout-react 0.5.17 → 0.5.21

package/src/PopupMenu.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { DragDrop } from ".";
 import TabNode from "./model/TabNode";
+import { CLASSES } from "./Types";
 
 /** @hidden @internal */
 export function showPopup(
@@ -15,7 +17,7 @@ export function showPopup(
     const layoutRect = layoutDiv.getBoundingClientRect();
 
     const elm = currentDocument.createElement("div");
-    elm.className = classNameMapper("flexlayout__popup_menu_container");
+    elm.className = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);
     if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {
         elm.style.left = triggerRect.left - layoutRect.left + "px";
     } else {
@@ -27,27 +29,37 @@ export function showPopup(
     } else {
         elm.style.bottom = layoutRect.bottom - triggerRect.bottom + "px";
     }
+    DragDrop.instance.addGlass(() => onHide());
+    DragDrop.instance.setGlassCursorOverride("default");
+
     layoutDiv.appendChild(elm);
 
     const onHide = () => {
+        DragDrop.instance.hideGlass();
         layoutDiv.removeChild(elm);
         ReactDOM.unmountComponentAtNode(elm);
-        elm.removeEventListener("mouseup", onElementMouseUp);
-        currentDocument.removeEventListener("mouseup", onDocMouseUp);
+        elm.removeEventListener("mousedown", onElementMouseDown);
+        currentDocument.removeEventListener("mousedown", onDocMouseDown);
     };
 
-    const onElementMouseUp = (event: Event) => {
+    const onElementMouseDown = (event: Event) => {
         event.stopPropagation();
     };
 
-    const onDocMouseUp = (event: Event) => {
+    const onDocMouseDown = (event: Event) => {
         onHide();
     };
 
-    elm.addEventListener("mouseup", onElementMouseUp);
-    currentDocument.addEventListener("mouseup", onDocMouseUp);
+    elm.addEventListener("mousedown", onElementMouseDown);
+    currentDocument.addEventListener("mousedown", onDocMouseDown);
 
-    ReactDOM.render(<PopupMenu currentDocument={currentDocument} onSelect={onSelect} onHide={onHide} items={items} classNameMapper={classNameMapper} />, elm);
+    ReactDOM.render(<PopupMenu
+        currentDocument={currentDocument}
+        onSelect={onSelect}
+        onHide={onHide}
+        items={items}
+        classNameMapper={classNameMapper}
+    />, elm);
 }
 
 /** @hidden @internal */
@@ -69,11 +81,20 @@ const PopupMenu = (props: IPopupMenuProps) => {
         event.stopPropagation();
     };
 
-    const itemElements = items.map((item) => (
-        <div key={item.index} className={classNameMapper("flexlayout__popup_menu_item")} onClick={(event) => onItemClick(item, event)} title={item.node.getHelpText()}>
+    const itemElements = items.map((item, i) => (
+        <div key={item.index}
+            className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM)}
+            data-layout-path={"/popup-menu/tb" + i}
+            onClick={(event) => onItemClick(item, event)}
+            title={item.node.getHelpText()}>
             {item.node._getRenderedName()}
         </div>
     ));
 
-    return <div className={classNameMapper("flexlayout__popup_menu")}>{itemElements}</div>;
+    return (
+        <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}
+        data-layout-path="/popup-menu"
+        >
+            {itemElements}
+        </div>);
 };

package/src/Rect.ts

@@ -18,8 +18,8 @@ class Rect {
     }
 
     static fromElement(element: Element) {
-      let {x, y, width, height} = element.getBoundingClientRect();
-      return new Rect(x, y, width, height);
+        let { x, y, width, height } = element.getBoundingClientRect();
+        return new Rect(x, y, width, height);
     }
 
     clone() {
@@ -42,6 +42,10 @@ class Rect {
         return this.x + this.width;
     }
 
+    getCenter() {
+        return { x: this.x + this.width / 2, y: this.y + this.height / 2 };
+    }
+
     positionElement(element: HTMLElement, position?: string) {
         this.styleWithPosition(element.style, position);
     }

package/src/Types.ts

@@ -9,6 +9,8 @@ export enum CLASSES {
     FLEXLAYOUT__BORDER_BUTTON_TRAILING = "flexlayout__border_button_trailing",
     FLEXLAYOUT__BORDER_BUTTON__SELECTED = "flexlayout__border_button--selected",
     FLEXLAYOUT__BORDER_BUTTON__UNSELECTED = "flexlayout__border_button--unselected",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW = "flexlayout__border_toolbar_button_overflow",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ = "flexlayout__border_toolbar_button_overflow_",
 
     FLEXLAYOUT__BORDER_INNER = "flexlayout__border_inner",
     FLEXLAYOUT__BORDER_INNER_ = "flexlayout__border_inner_",
@@ -34,6 +36,7 @@ export enum CLASSES {
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
 
     FLEXLAYOUT__OUTLINE_RECT = "flexlayout__outline_rect",
+    FLEXLAYOUT__OUTLINE_RECT_EDGE = "flexlayout__outline_rect_edge",
 
     FLEXLAYOUT__SPLITTER = "flexlayout__splitter",
     FLEXLAYOUT__SPLITTER_EXTRA = "flexlayout__splitter_extra",
@@ -78,4 +81,7 @@ export enum CLASSES {
     FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
 
+    FLEXLAYOUT__POPUP_MENU_CONTAINER = "flexlayout__popup_menu_container",
+    FLEXLAYOUT__POPUP_MENU_ITEM = "flexlayout__popup_menu_item",
+    FLEXLAYOUT__POPUP_MENU = "flexlayout__popup_menu",
 }

package/src/model/BorderNode.ts

@@ -4,6 +4,7 @@ import DockLocation from "../DockLocation";
 import DropInfo from "../DropInfo";
 import Orientation from "../Orientation";
 import Rect from "../Rect";
+import { CLASSES } from "../Types";
 import IDraggable from "./IDraggable";
 import IDropTarget from "./IDropTarget";
 import { IJsonBorderNode } from "./IJsonModel";
@@ -50,6 +51,7 @@ class BorderNode extends Node implements IDropTarget {
         attributeDefinitions.addInherited("autoSelectTabWhenClosed", "borderAutoSelectTabWhenClosed").setType(Attribute.BOOLEAN);
         attributeDefinitions.addInherited("size", "borderSize").setType(Attribute.NUMBER);
         attributeDefinitions.addInherited("minSize", "borderMinSize").setType(Attribute.NUMBER);
+        attributeDefinitions.addInherited("enableAutoHide", "borderEnableAutoHide").setType(Attribute.BOOLEAN);
         return attributeDefinitions;
     }
 
@@ -178,7 +180,19 @@ class BorderNode extends Node implements IDropTarget {
     }
 
     isShowing() {
-        return this._attributes.show as boolean;
+        const show = this._attributes.show as boolean;
+        if (show) {
+            if (this._model._getShowHiddenBorder() !== this._location && this.isAutoHide() && this._children.length === 0) {
+                return false;
+            } 
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    isAutoHide() {
+        return this._getAttr("enableAutoHide") as boolean;
     }
 
     /** @hidden @internal */
@@ -296,18 +310,18 @@ class BorderNode extends Node implements IDropTarget {
                         childCenter = childRect.x + childRect.width / 2;
                         if (x >= pos && x < childCenter) {
                             const outlineRect = new Rect(childRect.x - 2, childY, 3, childHeight);
-                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect");
+                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                             break;
                         }
                         pos = childCenter;
                     }
                     if (dropInfo == null) {
                         const outlineRect = new Rect(childRect.getRight() - 2, childY, 3, childHeight);
-                        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect");
+                        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                     }
                 } else {
                     const outlineRect = new Rect(this._tabHeaderRect!.x + 1, this._tabHeaderRect!.y + 2, 3, 18);
-                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, "flexlayout__outline_rect");
+                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                 }
             } else {
                 if (this._children.length > 0) {
@@ -324,18 +338,18 @@ class BorderNode extends Node implements IDropTarget {
                         childCenter = childRect.y + childRect.height / 2;
                         if (y >= pos && y < childCenter) {
                             const outlineRect = new Rect(childX, childRect.y - 2, childWidth, 3);
-                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect");
+                            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                             break;
                         }
                         pos = childCenter;
                     }
                     if (dropInfo == null) {
                         const outlineRect = new Rect(childX, childRect.getBottom() - 2, childWidth, 3);
-                        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect");
+                        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                     }
                 } else {
                     const outlineRect = new Rect(this._tabHeaderRect!.x + 2, this._tabHeaderRect!.y + 1, 18, 3);
-                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, "flexlayout__outline_rect");
+                    dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                 }
             }
             if (!dragNode._canDockInto(dragNode, dropInfo)) {
@@ -343,7 +357,7 @@ class BorderNode extends Node implements IDropTarget {
             }
         } else if (this.getSelected() !== -1 && this._contentRect!.contains(x, y)) {
             const outlineRect = this._contentRect;
-            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, "flexlayout__outline_rect");
+            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
             if (!dragNode._canDockInto(dragNode, dropInfo)) {
                 return undefined;
             }

package/src/model/BorderSet.ts

@@ -58,23 +58,21 @@ class BorderSet {
 
         // sum size of borders to see they will fit
         for (const border of showingBorders) {
-            if (border.isShowing()) {
-                border._setAdjustedSize(border.getSize());
-                const visible = border.getSelected() !== -1;
-                if (border.getLocation().getOrientation() === Orientation.HORZ) {
-                    sumWidth += border.getBorderBarSize() ;
-                    if (visible) {
-                        width -= this._model.getSplitterSize();
-                        sumWidth += border.getSize();
-                        adjustableWidth += border.getSize();
-                    }
-                } else {
-                    sumHeight += border.getBorderBarSize();
-                    if (visible) {
-                        height -= this._model.getSplitterSize();
-                        sumHeight += border.getSize();
-                        adjustableHeight += border.getSize();
-                    }
+            border._setAdjustedSize(border.getSize());
+            const visible = border.getSelected() !== -1;
+            if (border.getLocation().getOrientation() === Orientation.HORZ) {
+                sumWidth += border.getBorderBarSize() ;
+                if (visible) {
+                    width -= this._model.getSplitterSize();
+                    sumWidth += border.getSize();
+                    adjustableWidth += border.getSize();
+                }
+            } else {
+                sumHeight += border.getBorderBarSize();
+                if (visible) {
+                    height -= this._model.getSplitterSize();
+                    sumHeight += border.getSize();
+                    adjustableHeight += border.getSize();
                 }
             }
         }

package/src/model/IJsonModel.ts

@@ -35,10 +35,12 @@ export interface IGlobalAttributes {
 	borderAutoSelectTabWhenOpen?: boolean; // default: true
 	borderBarSize?: number; // default: 0
 	borderClassName?: string;
+	borderEnableAutoHide?: boolean; // default: false
 	borderEnableDrop?: boolean; // default: true
 	borderMinSize?: number; // default: 0
 	borderSize?: number; // default: 200
 	enableEdgeDock?: boolean; // default: true
+	enableUseVisibility?: boolean; // default: false
 	marginInsets?: IInsets; // default: {"top":0,"right":0,"bottom":0,"left":0}
 	rootOrientationVertical?: boolean; // default: false
 	splitterExtra?: number; // default: 0
@@ -131,6 +133,7 @@ export interface IBorderAttributes {
 	barSize?: number; // default: 0 - inherited from global borderBarSize
 	className?: string; //  - inherited from global borderClassName
 	config?: any;
+	enableAutoHide?: boolean; // default: false - inherited from global borderEnableAutoHide
 	enableDrop?: boolean; // default: true - inherited from global borderEnableDrop
 	minSize?: number; // default: 0 - inherited from global borderMinSize
 	selected?: number; // default: -1

package/src/model/Model.ts

@@ -59,6 +59,7 @@ class Model {
         attributeDefinitions.add("rootOrientationVertical", false).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("marginInsets", { top: 0, right: 0, bottom: 0, left: 0 })
             .setType("IInsets");
+        attributeDefinitions.add("enableUseVisibility", false).setType(Attribute.BOOLEAN);
 
         // tab
         attributeDefinitions.add("tabEnableClose", true).setType(Attribute.BOOLEAN);
@@ -102,6 +103,8 @@ class Model {
         attributeDefinitions.add("borderAutoSelectTabWhenOpen", true).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("borderAutoSelectTabWhenClosed", false).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("borderClassName", undefined).setType(Attribute.STRING);
+        attributeDefinitions.add("borderEnableAutoHide", false).setType(Attribute.BOOLEAN);
+
         return attributeDefinitions;
     }
 
@@ -127,6 +130,9 @@ class Model {
     private _pointerFine: boolean;
     /** @hidden @internal */
     private _onCreateTabSet? : (tabNode?: TabNode) => ITabSetAttributes;
+    /** @hidden @internal */
+    private _showHiddenBorder: DockLocation;
+
 
     /**
      * 'private' constructor. Use the static method Model.fromJson(json) to create a model
@@ -138,6 +144,7 @@ class Model {
         this._idMap = {};
         this._borders = new BorderSet(this);
         this._pointerFine = true;
+        this._showHiddenBorder = DockLocation.CENTER;
     }
 
     /** @hidden @internal */
@@ -156,6 +163,16 @@ class Model {
         }
     }
 
+    /** @hidden @internal */
+    _getShowHiddenBorder() {
+        return this._showHiddenBorder;
+    }
+
+    /** @hidden @internal */
+    _setShowHiddenBorder(location: DockLocation) {
+        this._showHiddenBorder = location;
+    }
+
     /** @hidden @internal */
     _setActiveTabset(tabsetNode: TabSetNode | undefined) {
         this._activeTabSet = tabsetNode;
@@ -185,6 +202,10 @@ class Model {
         return this._attributes.rootOrientationVertical as boolean;
     }
 
+    isUseVisibility() {
+        return this._attributes.enableUseVisibility as boolean;
+    }
+
     /**
      * Gets the
      * @returns {BorderSet|*}
@@ -265,13 +286,17 @@ class Model {
                 const node = this._idMap[action.data.node];
 
                 if (node instanceof TabSetNode) {
-                    // first delete all child tabs
+                    // first delete all child tabs that are closeable
                     const children = [...node.getChildren()];
                     children.forEach((child, i) => {
-                        (child as TabNode)._delete();
+                        if ((child as TabNode).isEnableClose()) {
+                            (child as TabNode)._delete();
+                        }
                     });
 
-                    node._delete();
+                    if (node.getChildren().length === 0) {
+                        node._delete();
+                    }
                     this._tidy();
                 }
                 break;

package/src/model/RowNode.ts

@@ -5,6 +5,7 @@ import DockLocation from "../DockLocation";
 import DropInfo from "../DropInfo";
 import Orientation from "../Orientation";
 import Rect from "../Rect";
+import { CLASSES } from "../Types";
 import BorderNode from "./BorderNode";
 import IDraggable from "./IDraggable";
 import IDropTarget from "./IDropTarget";
@@ -381,7 +382,9 @@ class RowNode extends Node implements IDropTarget {
         // add tabset into empty root
         if (this === this._model.getRoot() && this._children.length === 0) {
             const callback = this._model._getOnCreateTabSet();
-            const child = new TabSetNode(this._model, callback ? callback() : {});
+            let attrs = callback ? callback() : {};
+            attrs = {...attrs, selected: -1};
+            const child = new TabSetNode(this._model, attrs);
             this._model._setActiveTabset(child);
             this._addChild(child);
         }
@@ -404,24 +407,24 @@ class RowNode extends Node implements IDropTarget {
                 const dockLocation = DockLocation.LEFT;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.width = outlineRect.width / 2;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (x > this._rect.getRight() - margin && yy > h / 2 - half && yy < h / 2 + half) {
                 const dockLocation = DockLocation.RIGHT;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.width = outlineRect.width / 2;
                 outlineRect.x += outlineRect.width;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (y < this._rect.y + margin && xx > w / 2 - half && xx < w / 2 + half) {
                 const dockLocation = DockLocation.TOP;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.height = outlineRect.height / 2;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             } else if (y > this._rect.getBottom() - margin && xx > w / 2 - half && xx < w / 2 + half) {
                 const dockLocation = DockLocation.BOTTOM;
                 const outlineRect = dockLocation.getDockRect(this._rect);
                 outlineRect.height = outlineRect.height / 2;
                 outlineRect.y += outlineRect.height;
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT_EDGE);
             }
 
             if (dropInfo !== undefined) {

package/src/model/TabSetNode.ts

@@ -4,6 +4,7 @@ import DockLocation from "../DockLocation";
 import DropInfo from "../DropInfo";
 import Orientation from "../Orientation";
 import Rect from "../Rect";
+import { CLASSES } from "../Types";
 import BorderNode from "./BorderNode";
 import IDraggable from "./IDraggable";
 import IDropTarget from "./IDropTarget";
@@ -27,6 +28,9 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
                 newLayoutNode._addChild(child);
             });
         }
+        if (newLayoutNode._children.length === 0) {
+            newLayoutNode._setSelected(-1);
+        }
 
         if (json.maximized && json.maximized === true) {
             model._setMaximizedTabset(newLayoutNode);
@@ -268,11 +272,11 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
         if (dragNode === this) {
             const dockLocation = DockLocation.CENTER;
             const outlineRect = this._tabHeaderRect;
-            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, "flexlayout__outline_rect");
+            dropInfo = new DropInfo(this, outlineRect!, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
         } else if (this._contentRect!.contains(x, y)) {
             const dockLocation = DockLocation.getLocation(this._contentRect!, x, y);
             const outlineRect = dockLocation.getDockRect(this._rect);
-            dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect");
+            dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
         } else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {
             let r: Rect;
             let yy: number;
@@ -296,7 +300,7 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
                     if (x >= p && x < childCenter) {
                         const dockLocation = DockLocation.CENTER;
                         const outlineRect = new Rect(r.x - 2, yy, 3, h);
-                        dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect");
+                        dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
                         break;
                     }
                     p = childCenter;
@@ -305,7 +309,7 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
             if (dropInfo == null) {
                 const dockLocation = DockLocation.CENTER;
                 const outlineRect = new Rect(r.getRight() - 2, yy, 3, h);
-                dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect");
+                dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
             }
         }
 

package/src/view/BorderButton.tsx

@@ -6,6 +6,7 @@ import Rect from "../Rect";
 import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
+import { isAuxMouseEvent } from "./TabSet";
 
 /** @hidden @internal */
 export interface IBorderButtonProps {
@@ -16,16 +17,29 @@ export interface IBorderButtonProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const BorderButton = (props: IBorderButtonProps) => {
-    const { layout, node, selected, border, iconFactory, titleFactory, icons } = props;
+    const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
-        props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
+        if (!isAuxMouseEvent(event)) {
+            const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
+            props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
+        }
+    };
+
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(node, event);
+        }
+    };
+
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(node, event);
     };
 
     const onClick = () => {
@@ -105,7 +119,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
         }
     }
 
-    if (typeof leadingContent === undefined && typeof node.getIcon() !== undefined) {
+    if (leadingContent === undefined && node.getIcon() !== undefined) {
         leadingContent = <img src={node.getIcon()} alt="leadingContent" />;
     }
 
@@ -122,14 +136,28 @@ export const BorderButton = (props: IBorderButtonProps) => {
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
         buttons.push(
-            <div key="close" title={closeTitle} className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)} onMouseDown={onCloseMouseDown} onClick={onClose} onTouchStart={onCloseMouseDown}>
+            <div 
+                key="close" 
+                data-layout-path={path + "/button/close"}
+                title={closeTitle} 
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)} 
+                onMouseDown={onCloseMouseDown} 
+                onClick={onClose} 
+                onTouchStart={onCloseMouseDown}>
                 {icons?.close}
             </div>
         );
     }
 
     return (
-        <div ref={selfRef} style={{}} className={classNames} onMouseDown={onMouseDown} onTouchStart={onMouseDown} title={node.getHelpText()}>
+        <div ref={selfRef} style={{}} className={classNames} 
+        data-layout-path={path}
+        onMouseDown={onMouseDown} 
+        onClick={onAuxMouseClick}
+        onAuxClick={onAuxMouseClick}
+        onContextMenu={onContextMenu}
+        onTouchStart={onMouseDown} 
+        title={node.getHelpText()}>
             {leading}
             {content}
             {buttons}

package/src/view/BorderTabSet.tsx

@@ -10,6 +10,7 @@ import { I18nLabel } from "../I18nLabel";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
+import { isAuxMouseEvent } from "./TabSet";
 
 /** @hidden @internal */
 export interface IBorderTabSetProps {
@@ -18,11 +19,12 @@ export interface IBorderTabSetProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const BorderTabSet = (props: IBorderTabSetProps) => {
-    const { border, layout, iconFactory, titleFactory, icons } = props;
+    const { border, layout, iconFactory, titleFactory, icons, path } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
@@ -30,13 +32,24 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
 
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(border, event);
+        }
+    };
+
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(border, event);
+    };
+
     const onInterceptMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent<HTMLButtonElement>) => {
         event.stopPropagation();
     };
 
-    const onOverflowClick = () => {
+    const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const element = overflowbuttonRef.current!;
         showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        event.stopPropagation();
     };
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
@@ -44,11 +57,12 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         userControlledLeft.current = false;
     };
 
-    const onFloatTab = () => {
+    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const selectedTabNode = border.getChildren()[border.getSelected()] as TabNode;
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
         }
+        event.stopPropagation();
     };
 
     const cm = layout.getClassName;
@@ -65,6 +79,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                 layout={layout}
                 border={border.getLocation().getName()}
                 node={child}
+                path={path + "/tb" + i}
                 key={child.getId()}
                 selected={isSelected}
                 iconFactory={iconFactory}
@@ -97,7 +112,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             <button
                 key="overflowbutton"
                 ref={overflowbuttonRef}
-                className={cm("flexlayout__border_toolbar_button_overflow") + " " + cm("flexlayout__border_toolbar_button_overflow_" + border.getLocation().getName())}
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName())}
                 title={overflowTitle}
                 onClick={onOverflowClick}
                 onMouseDown={onInterceptMouseDown}
@@ -145,7 +160,12 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     }
 
     return (
-        <div ref={selfRef} style={style} className={borderClasses} onWheel={onMouseWheel}>
+        <div ref={selfRef} dir="ltr" style={style} className={borderClasses} 
+            data-layout-path={path}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onContextMenu={onContextMenu}
+            onWheel={onMouseWheel}>
             <div style={{ height: borderHeight }} className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}>
                 <div style={innerStyle} className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}>
                     {tabs}