flexlayout-react 0.5.21 → 0.6.3

package/src/view/BorderButton.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { I18nLabel } from "..";
-import Actions from "../model/Actions";
-import TabNode from "../model/TabNode";
-import Rect from "../Rect";
-import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
+import { Actions } from "../model/Actions";
+import { TabNode } from "../model/TabNode";
+import { Rect } from "../Rect";
+import { IIcons, ILayoutCallbacks } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
-import { isAuxMouseEvent } from "./TabSet";
+import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface IBorderButtonProps {
@@ -27,8 +27,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
         if (!isAuxMouseEvent(event)) {
-            const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
-            props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
+            props.layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
         }
     };
 
@@ -96,53 +95,21 @@ export const BorderButton = (props: IBorderButtonProps) => {
         classNames += " " + node.getClassName();
     }
 
-    let leadingContent = iconFactory ? iconFactory(node) : undefined;
-    let titleContent: React.ReactNode = node.getName();
-    let name = node.getName();
-
-    function isTitleObject(obj: any): obj is ITitleObject {
-        return obj.titleContent !== undefined 
-      }
-
-    if (titleFactory !== undefined) {
-        const titleObj = titleFactory(node);
-        if (titleObj !== undefined) {
-            if (typeof titleObj === "string") {
-                titleContent = titleObj as string;
-                name = titleObj as string;
-            } else if (isTitleObject(titleObj)) {
-                titleContent = titleObj.titleContent;
-                name = titleObj.name;
-            } else {
-                titleContent = titleObj;
-            }
-        }
-    }
-
-    if (leadingContent === undefined && node.getIcon() !== undefined) {
-        leadingContent = <img src={node.getIcon()} alt="leadingContent" />;
-    }
-
-    let buttons: any[] = [];
-
-    // allow customization of leading contents (icon) and contents
-    const renderState = { leading: leadingContent, content: titleContent, name, buttons };
-    layout.customizeTab(node, renderState);
-    node._setRenderedName(renderState.name);
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
 
-    const content = <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>{renderState.content}</div>;
-    const leading = <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING)}>{renderState.leading}</div>;
+    const content = renderState.content ? (<div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>{renderState.content}</div>) : null;
+    const leading = renderState.leading ? (<div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING)}>{renderState.leading}</div>) : null;
 
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
-        buttons.push(
-            <div 
-                key="close" 
+        renderState.buttons.push(
+            <div
+                key="close"
                 data-layout-path={path + "/button/close"}
-                title={closeTitle} 
-                className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)} 
-                onMouseDown={onCloseMouseDown} 
-                onClick={onClose} 
+                title={closeTitle}
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)}
+                onMouseDown={onCloseMouseDown}
+                onClick={onClose}
                 onTouchStart={onCloseMouseDown}>
                 {icons?.close}
             </div>
@@ -150,17 +117,17 @@ export const BorderButton = (props: IBorderButtonProps) => {
     }
 
     return (
-        <div ref={selfRef} style={{}} className={classNames} 
-        data-layout-path={path}
-        onMouseDown={onMouseDown} 
-        onClick={onAuxMouseClick}
-        onAuxClick={onAuxMouseClick}
-        onContextMenu={onContextMenu}
-        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}
+            {renderState.buttons}
         </div>
     );
 };

package/src/view/BorderTabSet.tsx

@@ -1,24 +1,24 @@
 import * as React from "react";
-import DockLocation from "../DockLocation";
-import Border from "../model/BorderNode";
-import TabNode from "../model/TabNode";
+import { DockLocation } from "../DockLocation";
+import { BorderNode } from "../model/BorderNode";
+import { TabNode } from "../model/TabNode";
 import { BorderButton } from "./BorderButton";
 import { IIcons, ILayoutCallbacks } from "./Layout";
 import { showPopup } from "../PopupMenu";
-import Actions from "../model/Actions";
+import { Actions } from "../model/Actions";
 import { I18nLabel } from "../I18nLabel";
 import { useTabOverflow } from "./TabOverflowHook";
-import Orientation from "../Orientation";
+import { Orientation } from "../Orientation";
 import { CLASSES } from "../Types";
-import { isAuxMouseEvent } from "./TabSet";
+import { isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface IBorderTabSetProps {
-    border: Border;
+    border: BorderNode;
     layout: ILayoutCallbacks;
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
-    icons?: IIcons;
+    icons: IIcons;
     path: string;
 }
 
@@ -47,8 +47,18 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     };
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        const element = overflowbuttonRef.current!;
-        showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        const callback = layout.getShowOverflowMenu();
+        if (callback !== undefined) {
+            callback(border, event, hiddenTabs, onOverflowItemSelect);
+        } else {
+            const element = overflowbuttonRef.current!;
+            showPopup(element,
+                hiddenTabs,
+                onOverflowItemSelect,
+                layout,
+                iconFactory,
+                titleFactory);
+        }
         event.stopPropagation();
     };
 
@@ -108,18 +118,26 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     if (hiddenTabs.length > 0) {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
+        let overflowContent;
+        if (typeof icons.more === "function") {
+            overflowContent = icons.more(border, hiddenTabs);
+        } else {
+            overflowContent = (<>
+                {icons.more}
+                <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
+            </>);
+        }
         buttons.push(
             <button
                 key="overflowbutton"
                 ref={overflowbuttonRef}
-                className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName())}
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName())}
                 title={overflowTitle}
                 onClick={onOverflowClick}
                 onMouseDown={onInterceptMouseDown}
                 onTouchStart={onInterceptMouseDown}
             >
-                {icons?.more}
-                {hiddenTabs.length}
+                {overflowContent}
             </button>
         );
     }
@@ -137,7 +155,9 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                     onClick={onFloatTab}
                     onMouseDown={onInterceptMouseDown}
                     onTouchStart={onInterceptMouseDown}
-                />
+                >
+                    {(typeof icons.popout === "function") ? icons.popout(selectedTabNode) : icons.popout}
+                </button>
             );
         }
     }
@@ -160,7 +180,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     }
 
     return (
-        <div ref={selfRef} dir="ltr" style={style} className={borderClasses} 
+        <div ref={selfRef} dir="ltr" style={style} className={borderClasses}
             data-layout-path={path}
             onClick={onAuxMouseClick}
             onAuxClick={onAuxMouseClick}

package/src/view/FloatingWindow.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
-import Rect from "../Rect";
+import { Rect } from "../Rect";
 import { CLASSES } from "../Types";
 
 /** @hidden @internal */

package/src/view/FloatingWindowTab.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import TabNode from "../model/TabNode";
+import { TabNode } from "../model/TabNode";
 import { ILayoutCallbacks } from "./Layout";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { I18nLabel } from "../I18nLabel";

package/src/view/Icons.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+const style = {width:"1em", height:"1em", display: "flex", alignItems:"center"};
+
+export const CloseIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" >
+            <path fill="none" d="M0 0h24v24H0z"/>
+            <path  stroke="gray" fill="gray" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+        </svg>
+    );
+}
+
+export const MaximizeIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+    );
+}
+
+export const OverflowIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M7 10l5 5 5-5z"/></svg>
+    );
+}
+
+export const PopoutIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg"  style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>
+    );
+}
+
+export const RestoreIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>
+    );
+}

package/src/view/Layout.tsx

@@ -1,21 +1,21 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import DockLocation from "../DockLocation";
-import DragDrop from "../DragDrop";
-import DropInfo from "../DropInfo";
+import { DockLocation } from "../DockLocation";
+import { DragDrop } from "../DragDrop";
+import { DropInfo } from "../DropInfo";
 import { I18nLabel } from "../I18nLabel";
-import Action from "../model/Action";
-import Actions from "../model/Actions";
-import BorderNode from "../model/BorderNode";
-import BorderSet from "../model/BorderSet";
-import IDraggable from "../model/IDraggable";
-import Model, { ILayoutMetrics } from "../model/Model";
-import Node from "../model/Node";
-import RowNode from "../model/RowNode";
-import SplitterNode from "../model/SplitterNode";
-import TabNode from "../model/TabNode";
-import TabSetNode from "../model/TabSetNode";
-import Rect from "../Rect";
+import { Action } from "../model/Action";
+import { Actions } from "../model/Actions";
+import { BorderNode } from "../model/BorderNode";
+import { BorderSet } from "../model/BorderSet";
+import { IDraggable } from "../model/IDraggable";
+import { Model, ILayoutMetrics } from "../model/Model";
+import { Node } from "../model/Node";
+import { RowNode } from "../model/RowNode";
+import { SplitterNode } from "../model/SplitterNode";
+import { TabNode } from "../model/TabNode";
+import { TabSetNode } from "../model/TabSetNode";
+import { Rect } from "../Rect";
 import { CLASSES } from "../Types";
 import { BorderTabSet } from "./BorderTabSet";
 import { Splitter } from "./Splitter";
@@ -26,11 +26,19 @@ import { FloatingWindowTab } from "./FloatingWindowTab";
 import { TabFloating } from "./TabFloating";
 import { IJsonTabNode } from "../model/IJsonModel";
 import { Orientation } from "..";
+import { CloseIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons";
+import { TabButtonStamp } from "./TabButtonStamp";
 
 export type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
-export type DragRectRenderCallback = (text: String, node?: Node, json?: IJsonTabNode) => React.ReactElement | undefined;
+export type DragRectRenderCallback = (content: React.ReactElement | undefined, node?: Node, json?: IJsonTabNode) => React.ReactElement | undefined;
 export type FloatingTabPlaceholderRenderCallback = (dockPopout: () => void, showPopout: () => void) => React.ReactElement | undefined;
 export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+export type ShowOverflowMenuCallback = (
+    node: TabSetNode | BorderNode,
+    mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>,
+    items: { index: number; node: TabNode }[],
+    onSelect: (item: { index: number; node: TabNode }) => void,
+) => void;
 
 export interface ILayoutProps {
     model: Model;
@@ -39,7 +47,6 @@ export interface ILayoutProps {
     fontFamily?: string;
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => ITitleObject | React.ReactNode | undefined;
-    closeIcon?: React.ReactNode;
     icons?: IIcons;
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (
@@ -75,6 +82,7 @@ export interface ILayoutProps {
     onRenderFloatingTabPlaceholder?: FloatingTabPlaceholderRenderCallback;
     onContextMenu?: NodeMouseEvent;
     onAuxMouseClick?: NodeMouseEvent;
+    onShowOverflowMenu?: ShowOverflowMenuCallback;
 }
 export interface IFontValues {
     size?: string;
@@ -109,17 +117,27 @@ export interface ILayoutState {
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
     showHiddenBorder: DockLocation;
+    portal?: React.ReactNode;
 }
 
 export interface IIcons {
-    close?: React.ReactNode;
-    closeTabset?: React.ReactNode;
-    popout?: React.ReactNode;
-    maximize?: React.ReactNode;
-    restore?: React.ReactNode;
-    more?: React.ReactNode;
+    close?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
+    closeTabset?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
+    popout?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
+    maximize?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
+    restore?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
+    more?: (React.ReactNode | ((tabSetNode: (TabSetNode | BorderNode), hiddenTabs: { node: TabNode; index: number }[]) => React.ReactNode));
 }
 
+const defaultIcons = {
+    close: <CloseIcon />,
+    closeTabset: <CloseIcon />,
+    popout: <PopoutIcon />,
+    maximize: <MaximizeIcon />,
+    restore: <RestoreIcon />,
+    more: <OverflowIcon />,
+};
+
 export interface ICustomDropDestination {
     rect: Rect;
     callback: CustomDragCallback;
@@ -146,7 +164,7 @@ export interface ILayoutCallbacks {
     getRootDiv(): HTMLDivElement;
     dragStart(
         event: Event | React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement> | React.DragEvent<HTMLDivElement> | undefined,
-        dragDivText: string,
+        dragDivText: string | undefined,
         node: Node & IDraggable,
         allowDrag: boolean,
         onClick?: (event: Event) => void,
@@ -166,6 +184,9 @@ export interface ILayoutCallbacks {
     getOnRenderFloatingTabPlaceholder(): FloatingTabPlaceholderRenderCallback | undefined;
     showContextMenu(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>): void;
     auxMouseClick(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>): void;
+    showPortal: (portal: React.ReactNode, portalDiv: HTMLDivElement) => void;
+    hidePortal: () => void;
+    getShowOverflowMenu(): ShowOverflowMenuCallback | undefined;
 }
 
 // Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do
@@ -215,7 +236,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @hidden @internal */
     private dragRectRendered: boolean = true;
     /** @hidden @internal */
-    private dragDivText: string = "";
+    private dragDivText: string | undefined = undefined;
     /** @hidden @internal */
     private dropInfo: DropInfo | undefined;
     /** @hidden @internal */
@@ -248,7 +269,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @hidden @internal */
     private popoutURL: string;
     /** @hidden @internal */
-    private icons?: IIcons;
+    private icons: IIcons;
     /** @hidden @internal */
     private firstRender: boolean;
     /** @hidden @internal */
@@ -264,8 +285,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.findBorderBarSizeRef = React.createRef<HTMLDivElement>();
         this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;
         this.popoutURL = props.popoutURL ? props.popoutURL : "popout.html";
-        // For backwards compatibility, prop closeIcon sets prop icons.close:
-        this.icons = props.closeIcon ? Object.assign({ close: props.closeIcon }, props.icons) : props.icons;
+        this.icons = { ...defaultIcons, ...props.icons };
         this.firstRender = true;
 
         this.state = {
@@ -283,11 +303,13 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @hidden @internal */
     styleFont(style: Record<string, string>): Record<string, string> {
         if (this.props.font) {
-            if (this.props.font.size) {
-                style.fontSize = this.props.font.size;
-            }
-            if (this.props.font.family) {
-                style.fontFamily = this.props.font.family;
+            if (this.selfRef.current) {
+                if (this.props.font.size) {
+                    this.selfRef.current.style.setProperty("--font-size", this.props.font.size);
+                }
+                if (this.props.font.family) {
+                    this.selfRef.current.style.setProperty("--font-family", this.props.font.family);
+                }
             }
             if (this.props.font.style) {
                 style.fontStyle = this.props.font.style;
@@ -459,7 +481,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         const metrics: ILayoutMetrics = {
             headerBarSize: this.state.calculatedHeaderBarSize,
             tabBarSize: this.state.calculatedTabBarSize,
-            borderBarSize: this.state.calculatedBorderBarSize,
+            borderBarSize: this.state.calculatedBorderBarSize
         };
         this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);
 
@@ -503,6 +525,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 {splitterComponents}
                 {floatingWindows}
                 {this.metricsElements()}
+                {this.state.portal}
             </div>
         );
     }
@@ -691,7 +714,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
      * @param json the json for the new tab node
      * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
      */
-    addTabWithDragAndDrop(dragText: string, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void) {
+    addTabWithDragAndDrop(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void) {
         this.fnNewNodeDropped = onDrop;
         this.newTabJson = json;
         this.dragStart(undefined, dragText, TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);
@@ -705,7 +728,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
      * @param json the json for the new tab node
      * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
      */
-    addTabWithDragAndDropIndirect(dragText: string, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void) {
+    addTabWithDragAndDropIndirect(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void) {
         this.fnNewNodeDropped = onDrop;
         this.newTabJson = json;
 
@@ -739,6 +762,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         const rootdiv = this.selfRef.current;
         rootdiv!.removeChild(this.dragDiv!);
         this.dragDiv = undefined;
+        this.hidePortal();
         if (this.fnNewNodeDropped != null) {
             this.fnNewNodeDropped();
             this.fnNewNodeDropped = undefined;
@@ -769,6 +793,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             } catch (e) { }
 
             this.dragDiv = undefined;
+            this.hidePortal();
             this.hideEdges(rootdiv);
             if (this.fnNewNodeDropped != null) {
                 this.fnNewNodeDropped();
@@ -798,7 +823,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @hidden @internal */
     dragStart = (
         event: Event | React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement> | React.DragEvent<HTMLDivElement> | undefined,
-        dragDivText: string,
+        dragDivText: string | undefined,
         node: Node & IDraggable,
         allowDrag: boolean,
         onClick?: (event: Event) => void,
@@ -814,11 +839,24 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     };
 
     /** @hidden @internal */
-    dragRectRender = (text: String, node?: Node, json?: IJsonTabNode, onRendered?: () => void) => {
-        let content: React.ReactElement | undefined = <div style={{ whiteSpace: "pre" }}>{text.replace("<br>", "\n")}</div>;
+    dragRectRender = (text: String | undefined, node?: Node, json?: IJsonTabNode, onRendered?: () => void) => {
+        let content: React.ReactElement | undefined;
+
+        if (text !== undefined) {
+            content = <div style={{ whiteSpace: "pre" }}>{text.replace("<br>", "\n")}</div>;
+        } else {
+            if (node && node instanceof TabNode) {
+                content = (<TabButtonStamp
+                    node={node}
+                    layout={this}
+                    iconFactory={this.props.iconFactory}
+                    titleFactory={this.props.titleFactory}
+                />);
+            }
+        }
 
         if (this.props.onRenderDragRect !== undefined) {
-            const customContent = this.props.onRenderDragRect(text, node, json);
+            const customContent = this.props.onRenderDragRect(content, node, json);
             if (customContent !== undefined) {
                 content = customContent;
             }
@@ -827,15 +865,27 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         // hide div until the render is complete
         this.dragDiv!.style.visibility = "hidden";
         this.dragRectRendered = false;
-        ReactDOM.render(<DragRectRenderWrapper
-            // wait for it to be rendered
-            onRendered={() => {
-                this.dragRectRendered = true;
-                onRendered?.();
-            }}
-        >
-            {content}
-        </DragRectRenderWrapper>, this.dragDiv!);
+        this.showPortal(
+            <DragRectRenderWrapper
+                // wait for it to be rendered
+                onRendered={() => {
+                    this.dragRectRendered = true;
+                    onRendered?.();
+                }}>
+                {content}
+            </DragRectRenderWrapper>,
+            this.dragDiv!);
+    };
+
+    /** @hidden @internal */
+    showPortal = (control: React.ReactNode, element: HTMLElement) => {
+        const portal = ReactDOM.createPortal(control, element);
+        this.setState({ portal });
+    };
+
+    /** @hidden @internal */
+    hidePortal = () => {
+        this.setState({ portal: undefined });
     };
 
     /** @hidden @internal */
@@ -916,6 +966,8 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         rootdiv.removeChild(this.outlineDiv!);
         rootdiv.removeChild(this.dragDiv!);
         this.dragDiv = undefined;
+        this.hidePortal();
+
         this.hideEdges(rootdiv);
         DragDrop.instance.hideGlass();
 
@@ -1179,6 +1231,10 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         return this.props.onRenderFloatingTabPlaceholder;
     }
 
+    /** @hidden @internal */
+    getShowOverflowMenu() {
+        return this.props.onShowOverflowMenu;
+    }
     /** @hidden @internal */
     showContextMenu(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) {
         if (this.props.onContextMenu) {
@@ -1213,4 +1269,3 @@ const DragRectRenderWrapper = (props: IDragRectRenderWrapper) => {
         {props.children}
     </React.Fragment>)
 }
-export default Layout;

package/src/view/Splitter.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import DragDrop from "../DragDrop";
-import Actions from "../model/Actions";
-import BorderNode from "../model/BorderNode";
-import Node from "../model/Node";
-import RowNode from "../model/RowNode";
-import SplitterNode from "../model/SplitterNode";
-import Orientation from "../Orientation";
+import { DragDrop } from "../DragDrop";
+import { Actions } from "../model/Actions";
+import { BorderNode } from "../model/BorderNode";
+import { Node } from "../model/Node";
+import { RowNode } from "../model/RowNode";
+import { SplitterNode } from "../model/SplitterNode";
+import { Orientation } from "../Orientation";
 import { CLASSES } from "../Types";
 import { ILayoutCallbacks } from "./Layout";
 

package/src/view/Tab.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { Fragment } from "react";
-import Actions from "../model/Actions";
-import TabNode from "../model/TabNode";
-import TabSetNode from "../model/TabSetNode";
+import { Actions } from "../model/Actions";
+import { TabNode } from "../model/TabNode";
+import { TabSetNode } from "../model/TabSetNode";
 import { CLASSES } from "../Types";
 import { ILayoutCallbacks } from "./Layout";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { I18nLabel } from "../I18nLabel";
 import { BorderNode } from "..";
+import { hideElement } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabProps {
@@ -67,11 +68,11 @@ export const Tab = (props: ITabProps) => {
     }
 
     return (
-        <div 
-            className={className} 
+        <div
+            className={className}
             data-layout-path={path}
-            onMouseDown={onMouseDown} 
-            onTouchStart={onMouseDown} 
+            onMouseDown={onMouseDown}
+            onTouchStart={onMouseDown}
             style={style}>
             <ErrorBoundary message={props.layout.i18nName(I18nLabel.Error_rendering_component)}>
                 <Fragment>{child}</Fragment>
@@ -80,10 +81,4 @@ export const Tab = (props: ITabProps) => {
     );
 };
 
-export function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean ) {
-    if (useVisibility) {
-        style.visibility = "hidden";
-    } else {
-        style.display = "none";
-    }
-}
+