flexlayout-react 0.5.21 → 0.6.0

package/lib/view/Utils.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAuxMouseEvent = exports.hideElement = exports.getRenderStateEx = void 0;
+var React = require("react");
+/** @hidden @internal */
+function getRenderStateEx(layout, node, iconFactory, titleFactory) {
+    var leadingContent = iconFactory ? iconFactory(node) : undefined;
+    var titleContent = node.getName();
+    var name = node.getName();
+    function isTitleObject(obj) {
+        return obj.titleContent !== undefined;
+    }
+    if (titleFactory !== undefined) {
+        var titleObj = titleFactory(node);
+        if (titleObj !== undefined) {
+            if (typeof titleObj === "string") {
+                titleContent = titleObj;
+                name = titleObj;
+            }
+            else if (isTitleObject(titleObj)) {
+                titleContent = titleObj.titleContent;
+                name = titleObj.name;
+            }
+            else {
+                titleContent = titleObj;
+            }
+        }
+    }
+    if (leadingContent === undefined && node.getIcon() !== undefined) {
+        leadingContent = React.createElement("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
+    }
+    var buttons = [];
+    // allow customization of leading contents (icon) and contents
+    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };
+    layout.customizeTab(node, renderState);
+    node._setRenderedName(renderState.name);
+    return renderState;
+}
+exports.getRenderStateEx = getRenderStateEx;
+/** @hidden @internal */
+function hideElement(style, useVisibility) {
+    if (useVisibility) {
+        style.visibility = "hidden";
+    }
+    else {
+        style.display = "none";
+    }
+}
+exports.hideElement = hideElement;
+/** @hidden @internal */
+function isAuxMouseEvent(event) {
+    var auxEvent = false;
+    if (event.nativeEvent instanceof MouseEvent) {
+        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+            auxEvent = true;
+        }
+    }
+    return auxEvent;
+}
+exports.isAuxMouseEvent = isAuxMouseEvent;
+//# sourceMappingURL=Utils.js.map

package/lib/view/Utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../src/view/Utils.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAI/B,wBAAwB;AACxB,SAAgB,gBAAgB,CAC5B,MAAwB,EACxB,IAAa,EACb,WAA4D,EAC5D,YAA6D;IAE7D,IAAI,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,IAAI,YAAY,GAAoB,IAAI,CAAC,OAAO,EAAE,CAAC;IACnD,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAE1B,SAAS,aAAa,CAAC,GAAQ;QAC3B,OAAO,GAAG,CAAC,YAAY,KAAK,SAAS,CAAA;IACzC,CAAC;IAED,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,IAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,IAAI,QAAQ,KAAK,SAAS,EAAE;YACxB,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;gBAC9B,YAAY,GAAG,QAAkB,CAAC;gBAClC,IAAI,GAAG,QAAkB,CAAC;aAC7B;iBAAM,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE;gBAChC,YAAY,GAAG,QAAQ,CAAC,YAAY,CAAC;gBACrC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;aACxB;iBAAM;gBACH,YAAY,GAAG,QAAQ,CAAC;aAC3B;SACJ;KACJ;IAED,IAAI,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,SAAS,EAAE;QAC9D,cAAc,GAAG,6BAAK,KAAK,EAAE,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,EAAC,KAAK,EAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,GAAG,EAAC,gBAAgB,GAAG,CAAC;KAC1G;IAED,IAAI,OAAO,GAAU,EAAE,CAAC;IAExB,8DAA8D;IAC9D,IAAM,WAAW,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,MAAA,EAAE,OAAO,SAAA,EAAE,CAAC;IACtF,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAEvC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAExC,OAAO,WAAW,CAAC;AAEvB,CAAC;AA3CD,4CA2CC;AAED,wBAAwB;AACxB,SAAgB,WAAW,CAAC,KAA0B,EAAE,aAA+B;IACnF,IAAI,aAAa,EAAE;QACf,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;KAC/B;SAAM;QACH,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KAC1B;AACL,CAAC;AAND,kCAMC;AAGD,wBAAwB;AACxB,SAAgB,eAAe,CAAC,KAAsF;IAClH,IAAI,QAAQ,GAAG,KAAK,CAAC;IACrB,IAAI,KAAK,CAAC,WAAW,YAAY,UAAU,EAAE;QACzC,IAAI,KAAK,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,EAAE;YACpG,QAAQ,GAAG,IAAI,CAAC;SACnB;KACJ;IACD,OAAO,QAAQ,CAAC;AACpB,CAAC;AARD,0CAQC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.5.21",
+    "version": "0.6.0",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",

package/src/I18nLabel.ts

@@ -1,7 +1,7 @@
 export enum I18nLabel {
     Close_Tab = "Close",
     Close_Tabset = "Close tabset",
-    Move_Tab = "Move: ",
+    Move_Tab = "Move: ", // no longer used
     Move_Tabset = "Move tabset",
     Maximize = "Maximize tabset",
     Restore = "Restore tabset",

package/src/PopupMenu.tsx

@@ -3,15 +3,20 @@ import * as ReactDOM from "react-dom";
 import { DragDrop } from ".";
 import TabNode from "./model/TabNode";
 import { CLASSES } from "./Types";
+import { ILayoutCallbacks } from "./view/Layout";
+import { TabButtonStamp } from "./view/TabButtonStamp";
 
 /** @hidden @internal */
 export function showPopup(
-    layoutDiv: HTMLDivElement,
     triggerElement: Element,
     items: { index: number; node: TabNode }[],
     onSelect: (item: { index: number; node: TabNode }) => void,
-    classNameMapper: (defaultClassName: string) => string
+    layout: ILayoutCallbacks,
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined,
 ) {
+    const layoutDiv = layout.getRootDiv();
+    const classNameMapper = layout.getClassName;
     const currentDocument = triggerElement.ownerDocument;
     const triggerRect = triggerElement.getBoundingClientRect();
     const layoutRect = layoutDiv.getBoundingClientRect();
@@ -59,6 +64,9 @@ export function showPopup(
         onHide={onHide}
         items={items}
         classNameMapper={classNameMapper}
+        layout={layout}
+        iconFactory={iconFactory}
+        titleFactory={titleFactory}
     />, elm);
 }
 
@@ -69,11 +77,14 @@ interface IPopupMenuProps {
     onHide: () => void;
     onSelect: (item: { index: number; node: TabNode }) => void;
     classNameMapper: (defaultClassName: string) => string;
+    layout: ILayoutCallbacks;
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
 }
 
 /** @hidden @internal */
 const PopupMenu = (props: IPopupMenuProps) => {
-    const { items, onHide, onSelect, classNameMapper } = props;
+    const { items, onHide, onSelect, classNameMapper, layout, iconFactory, titleFactory} = props;
 
     const onItemClick = (item: { index: number; node: TabNode }, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         onSelect(item);
@@ -86,8 +97,15 @@ const PopupMenu = (props: IPopupMenuProps) => {
             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()}
+            title={item.node.getHelpText()} >
+            {item.node.getModel().isLegacyOverflowMenu() ? 
+            item.node._getNameForOverflowMenu() :
+            <TabButtonStamp 
+                node={item.node}
+                layout={layout}
+                iconFactory={iconFactory}
+                titleFactory={titleFactory}
+            />}
         </div>
     ));
 

package/src/Types.ts

@@ -70,6 +70,7 @@ export enum CLASSES {
     FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",
     FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
     FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
+    FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
 
     FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
     FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",

package/src/model/IJsonModel.ts

@@ -41,6 +41,7 @@ export interface IGlobalAttributes {
 	borderSize?: number; // default: 200
 	enableEdgeDock?: boolean; // default: true
 	enableUseVisibility?: boolean; // default: false
+	legacyOverflowMenu?: boolean; // default: false
 	marginInsets?: IInsets; // default: {"top":0,"right":0,"bottom":0,"left":0}
 	rootOrientationVertical?: boolean; // default: false
 	splitterExtra?: number; // default: 0
@@ -109,6 +110,7 @@ export interface ITabSetAttributes {
 	width?: number;
 }
 export interface ITabAttributes {
+	altName?: string;
 	borderHeight?: number; // default: -1 - inherited from global tabBorderHeight
 	borderWidth?: number; // default: -1 - inherited from global tabBorderWidth
 	className?: string; //  - inherited from global tabClassName

package/src/model/Model.ts

@@ -52,6 +52,9 @@ class Model {
     /** @hidden @internal */
     private static _createAttributeDefinitions(): AttributeDefinitions {
         const attributeDefinitions = new AttributeDefinitions();
+
+        attributeDefinitions.add("legacyOverflowMenu", false).setType(Attribute.BOOLEAN);
+
         // splitter
         attributeDefinitions.add("splitterSize", -1).setType(Attribute.NUMBER);
         attributeDefinitions.add("splitterExtra", 0).setType(Attribute.NUMBER);
@@ -448,6 +451,10 @@ class Model {
         return splitterSize;
     }
 
+    isLegacyOverflowMenu() {
+        return this._attributes.legacyOverflowMenu as boolean;
+    }
+
     getSplitterExtra() {
         return this._attributes.splitterExtra as number;
     }

package/src/model/TabNode.ts

@@ -26,6 +26,7 @@ class TabNode extends Node implements IDraggable {
         attributeDefinitions.add("id", undefined).setType(Attribute.STRING);
 
         attributeDefinitions.add("name", "[Unnamed Tab]").setType(Attribute.STRING);
+        attributeDefinitions.add("altName", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("helpText", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("component", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("config", undefined).setType("any");
@@ -84,7 +85,11 @@ class TabNode extends Node implements IDraggable {
     }
 
     /** @hidden @internal */
-    _getRenderedName() {
+    _getNameForOverflowMenu() {
+        const altName = this._getAttr("altName") as string;
+        if (altName !== undefined) {
+            return altName;
+        }
         return this._renderedName;
     }
 

package/src/view/BorderButton.tsx

@@ -3,10 +3,10 @@ import { I18nLabel } from "..";
 import Actions from "../model/Actions";
 import TabNode from "../model/TabNode";
 import Rect from "../Rect";
-import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
+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,46 +95,14 @@ 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(
+        renderState.buttons.push(
             <div 
                 key="close" 
                 data-layout-path={path + "/button/close"}
@@ -160,7 +127,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
         title={node.getHelpText()}>
             {leading}
             {content}
-            {buttons}
+            {renderState.buttons}
         </div>
     );
 };

package/src/view/BorderTabSet.tsx

@@ -10,7 +10,7 @@ import { I18nLabel } from "../I18nLabel";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
-import { isAuxMouseEvent } from "./TabSet";
+import { isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface IBorderTabSetProps {
@@ -48,7 +48,12 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const element = overflowbuttonRef.current!;
-        showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        showPopup( element, 
+            hiddenTabs, 
+            onOverflowItemSelect, 
+            layout,
+            iconFactory,
+            titleFactory);
         event.stopPropagation();
     };
 
@@ -137,7 +142,9 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                     onClick={onFloatTab}
                     onMouseDown={onInterceptMouseDown}
                     onTouchStart={onInterceptMouseDown}
-                />
+                >
+                    {icons?.popout}
+                </button>
             );
         }
     }

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

@@ -26,9 +26,11 @@ 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;
 
@@ -39,7 +41,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?: (
@@ -120,6 +121,15 @@ export interface IIcons {
     more?: 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 +156,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,
@@ -215,7 +225,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 */
@@ -264,8 +274,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 +292,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 +470,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);
 
@@ -691,7 +702,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 +716,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;
 
@@ -798,7 +809,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 +825,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;
             }

package/src/view/Tab.tsx

@@ -8,6 +8,7 @@ import { ILayoutCallbacks } from "./Layout";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { I18nLabel } from "../I18nLabel";
 import { BorderNode } from "..";
+import { hideElement } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabProps {
@@ -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";
-    }
-}
+

package/src/view/TabButton.tsx

@@ -4,10 +4,10 @@ import Actions from "../model/Actions";
 import TabNode from "../model/TabNode";
 import TabSetNode from "../model/TabSetNode";
 import Rect from "../Rect";
-import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
+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 ITabButtonProps {
@@ -31,8 +31,7 @@ export const TabButton = (props: ITabButtonProps) => {
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
 
         if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
-            const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
-            layout.dragStart(event, message, node, node.isEnableDrag(), onClick, onDoubleClick);
+            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);
         }
     };
 
@@ -110,7 +109,7 @@ export const TabButton = (props: ITabButtonProps) => {
         const layoutRect = layout.getDomRect();
         const r = selfRef.current!.getBoundingClientRect();
         node._setTabRect(new Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));
-        contentWidth.current = contentRef.current!.getBoundingClientRect().width;
+        contentWidth.current = selfRef.current!.getBoundingClientRect().width;
     };
 
     const onTextBoxMouseDown = (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => {
@@ -147,53 +146,21 @@ export const TabButton = (props: ITabButtonProps) => {
         classNames += " " + node.getClassName();
     }
 
-    let leadingContent = iconFactory ? iconFactory(node) : undefined;
-    let titleContent: React.ReactNode = node.getName();
-    let name = node.getName();
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
 
-    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);
-
-    let content = (
-        <div ref={contentRef} className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
+    let content = renderState.content ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
             {renderState.content}
-        </div>
-    );
-    const leading = <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>{renderState.leading}</div>;
+        </div>) : null;
+
+    const leading = renderState.leading ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>
+                {renderState.leading}
+        </div>) : null;
 
     if (layout.getEditingTab() === node) {
-        const contentStyle = { width: contentWidth + "px" };
         content = (
             <input
-                style={contentStyle}
                 ref={contentRef}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX)}
                 data-layout-path={path + "/textbox"}
@@ -209,7 +176,7 @@ export const TabButton = (props: ITabButtonProps) => {
 
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
-        buttons.push(
+        renderState.buttons.push(
             <div
                 key="close"
                 data-layout-path={path + "/button/close"}
@@ -236,7 +203,7 @@ export const TabButton = (props: ITabButtonProps) => {
         >
             {leading}
             {content}
-            {buttons}
+            {renderState.buttons}
         </div>
     );
 };