flexlayout-react 0.5.19 → 0.6.1

package/src/view/Layout.tsx

@@ -25,9 +25,12 @@ import { FloatingWindow } from "./FloatingWindow";
 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;
 
@@ -38,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?: (
@@ -108,6 +110,7 @@ export interface ILayoutState {
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
     showHiddenBorder: DockLocation;
+    portal?: React.ReactNode;
 }
 
 export interface IIcons {
@@ -119,6 +122,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;
@@ -145,7 +157,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,
@@ -163,8 +175,10 @@ export interface ILayoutCallbacks {
     setEditingTab(tabNode?: TabNode): void;
     getEditingTab(): TabNode | undefined;
     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;
+    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;
 }
 
 // Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do
@@ -214,7 +228,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 */
@@ -263,8 +277,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 = {
@@ -282,11 +295,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;
@@ -458,14 +473,14 @@ 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);
 
         this.centerRect = this.props.model._layout(this.state.rect, metrics);
 
         this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);
-        this.renderChildren(this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);
+        this.renderChildren("", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);
 
         if (this.edgesShown) {
             this.repositionEdges(this.state.rect)
@@ -502,6 +517,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 {splitterComponents}
                 {floatingWindows}
                 {this.metricsElements()}
+                {this.state.portal}
             </div>
         );
     }
@@ -543,10 +559,12 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @hidden @internal */
     renderBorder(borderSet: BorderSet, borderComponents: React.ReactNode[], tabComponents: Record<string, React.ReactNode>, floatingWindows: React.ReactNode[], splitterComponents: React.ReactNode[]) {
         for (const border of borderSet.getBorders()) {
+            const borderPath = `/border/${border.getLocation().getName()}`;
             if (border.isShowing()) {
                 borderComponents.push(
                     <BorderTabSet
-                        key={"border_" + border.getLocation().getName()}
+                        key={`border_${border.getLocation().getName()}`}
+                        path={borderPath}
                         border={border}
                         layout={this}
                         iconFactory={this.props.iconFactory}
@@ -556,10 +574,13 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 );
                 const drawChildren = border._getDrawChildren();
                 let i = 0;
+                let tabCount = 0;
                 for (const child of drawChildren) {
                     if (child instanceof SplitterNode) {
-                        splitterComponents.push(<Splitter key={child.getId()} layout={this} node={child} />);
+                        let path = borderPath + "/s";
+                        splitterComponents.push(<Splitter key={child.getId()} layout={this} node={child} path={path} />);
                     } else if (child instanceof TabNode) {
+                        let path = borderPath + "/t" + tabCount++;
                         if (this.supportsPopout && child.isFloating()) {
                             const rect = this._getScreenRect(child);
                             floatingWindows.push(
@@ -575,9 +596,19 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                                     <FloatingWindowTab layout={this} node={child} factory={this.props.factory} />
                                 </FloatingWindow>
                             );
-                            tabComponents[child.getId()] = <TabFloating key={child.getId()} layout={this} node={child} selected={i === border.getSelected()} />;
+                            tabComponents[child.getId()] = <TabFloating key={child.getId()}
+                                layout={this}
+                                path={path}
+                                node={child}
+                                selected={i === border.getSelected()
+                                } />;
                         } else {
-                            tabComponents[child.getId()] = <Tab key={child.getId()} layout={this} node={child} selected={i === border.getSelected()} factory={this.props.factory} />;
+                            tabComponents[child.getId()] = <Tab key={child.getId()}
+                                layout={this}
+                                path={path}
+                                node={child}
+                                selected={i === border.getSelected()}
+                                factory={this.props.factory} />;
                         }
                     }
                     i++;
@@ -587,16 +618,22 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     }
 
     /** @hidden @internal */
-    renderChildren(node: RowNode | TabSetNode, tabSetComponents: React.ReactNode[], tabComponents: Record<string, React.ReactNode>, floatingWindows: React.ReactNode[], splitterComponents: React.ReactNode[]) {
+    renderChildren(path: string, node: RowNode | TabSetNode, tabSetComponents: React.ReactNode[], tabComponents: Record<string, React.ReactNode>, floatingWindows: React.ReactNode[], splitterComponents: React.ReactNode[]) {
         const drawChildren = node._getDrawChildren();
+        let splitterCount = 0;
+        let tabCount = 0;
+        let rowCount = 0;
 
         for (const child of drawChildren!) {
             if (child instanceof SplitterNode) {
-                splitterComponents.push(<Splitter key={child.getId()} layout={this} node={child} />);
+                const newPath = path + "/s" + (splitterCount++);
+                splitterComponents.push(<Splitter key={child.getId()} layout={this} path={newPath} node={child} />);
             } else if (child instanceof TabSetNode) {
-                tabSetComponents.push(<TabSet key={child.getId()} layout={this} node={child} iconFactory={this.props.iconFactory} titleFactory={this.props.titleFactory} icons={this.icons} />);
-                this.renderChildren(child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
+                const newPath = path + "/ts" + (rowCount++);
+                tabSetComponents.push(<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) {
+                const newPath = path + "/t" + (tabCount++);
                 const selectedTab = child.getParent()!.getChildren()[(child.getParent() as TabSetNode).getSelected()];
                 if (selectedTab === undefined) {
                     // this should not happen!
@@ -617,13 +654,14 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                             <FloatingWindowTab layout={this} node={child} factory={this.props.factory} />
                         </FloatingWindow>
                     );
-                    tabComponents[child.getId()] = <TabFloating key={child.getId()} layout={this} node={child} selected={child === selectedTab} />;
+                    tabComponents[child.getId()] = <TabFloating key={child.getId()} layout={this} path={newPath} node={child} selected={child === selectedTab} />;
                 } else {
-                    tabComponents[child.getId()] = <Tab key={child.getId()} layout={this} node={child} selected={child === selectedTab} factory={this.props.factory} />;
+                    tabComponents[child.getId()] = <Tab key={child.getId()} layout={this} path={newPath} node={child} selected={child === selectedTab} factory={this.props.factory} />;
                 }
             } else {
                 // is row
-                this.renderChildren(child as RowNode, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
+                const newPath = path + ((child.getOrientation() === Orientation.HORZ) ? "/r" : "/c") + (rowCount++);
+                this.renderChildren(newPath, child as RowNode, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
             }
         }
     }
@@ -668,7 +706,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);
@@ -682,7 +720,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;
 
@@ -701,6 +739,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 const domRect = this.dragDiv.getBoundingClientRect();
                 const r = new Rect(0, 0, domRect?.width, domRect?.height);
                 r.centerInRect(this.state.rect);
+                this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
                 this.dragDiv.style.left = r.x + "px";
                 this.dragDiv.style.top = r.y + "px";
             }
@@ -715,6 +754,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;
@@ -745,6 +785,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();
@@ -774,7 +815,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,
@@ -790,11 +831,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;
             }
@@ -803,15 +857,25 @@ 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!);
+    };
+
+    showPortal = (control: React.ReactNode, element: HTMLElement) => {
+        const portal = ReactDOM.createPortal(control, element);
+        this.setState({portal});
+    };
+
+    hidePortal = () => {
+        this.setState({portal: undefined});
     };
 
     /** @hidden @internal */
@@ -827,6 +891,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         if (this.dragDiv == null) {
             this.dragDiv = this.currentDocument!.createElement("div");
             this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
+            this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
             this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
 
             rootdiv.appendChild(this.dragDiv);
@@ -891,6 +956,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();
 

package/src/view/Splitter.tsx

@@ -13,11 +13,12 @@ import { ILayoutCallbacks } from "./Layout";
 export interface ISplitterProps {
     layout: ILayoutCallbacks;
     node: SplitterNode;
+    path: string;
 }
 
 /** @hidden @internal */
 export const Splitter = (props: ISplitterProps) => {
-    const { layout, node } = props;
+    const { layout, node, path } = props;
 
     const pBounds = React.useRef<number[]>([]);
     const outlineDiv = React.useRef<HTMLDivElement | undefined>(undefined);
@@ -132,6 +133,7 @@ export const Splitter = (props: ISplitterProps) => {
     if (extra === 0) {
         return (<div
             style={style}
+            data-layout-path={path}
             className={className}
             onTouchStart={onMouseDown}
             onMouseDown={onMouseDown}>
@@ -156,6 +158,7 @@ export const Splitter = (props: ISplitterProps) => {
         return (
             <div
                 style={style}
+                data-layout-path={path}
                 className={className}>
                 <div
                     style={style2}

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 {
@@ -15,11 +16,12 @@ export interface ITabProps {
     selected: boolean;
     node: TabNode;
     factory: (node: TabNode) => React.ReactNode;
+    path: string;
 }
 
 /** @hidden @internal */
 export const Tab = (props: ITabProps) => {
-    const { layout, selected, node, factory } = props;
+    const { layout, selected, node, factory, path } = props;
     const [renderComponent, setRenderComponent] = React.useState<boolean>(!props.node.isEnableRenderOnDemand() || props.selected);
 
     React.useLayoutEffect(() => {
@@ -40,15 +42,17 @@ export const Tab = (props: ITabProps) => {
     };
 
     const cm = layout.getClassName;
+    const useVisibility = node.getModel().isUseVisibility();
 
     const parentNode = node.getParent() as TabSetNode | BorderNode;
-    const style: Record<string, any> = node._styleWithPosition({
-        display: selected ? "block" : "none",
-    });
+    const style: Record<string, any> = node._styleWithPosition();
+    if (!selected) {
+        hideElement(style, useVisibility);
+    }
 
     if (parentNode instanceof TabSetNode) {
         if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {
-            style.display = "none";
+            hideElement(style, useVisibility);
         }
     }
 
@@ -64,10 +68,17 @@ export const Tab = (props: ITabProps) => {
     }
 
     return (
-        <div className={className} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
+        <div 
+            className={className} 
+            data-layout-path={path}
+            onMouseDown={onMouseDown} 
+            onTouchStart={onMouseDown} 
+            style={style}>
             <ErrorBoundary message={props.layout.i18nName(I18nLabel.Error_rendering_component)}>
                 <Fragment>{child}</Fragment>
             </ErrorBoundary>
         </div>
     );
 };
+
+

package/src/view/TabButton.tsx

@@ -4,26 +4,26 @@ 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 {
     layout: ILayoutCallbacks;
     node: TabNode;
-    show: boolean;
     selected: boolean;
     height: number;
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const TabButton = (props: ITabButtonProps) => {
-    const { layout, node, show, selected, iconFactory, titleFactory, icons } = props;
+    const { layout, node, selected, iconFactory, titleFactory, icons, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
     const contentRef = React.useRef<HTMLInputElement | null>(null);
     const contentWidth = React.useRef<number>(0);
@@ -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);
         }
     };
 
@@ -55,7 +54,7 @@ export const TabButton = (props: ITabButtonProps) => {
             layout.setEditingTab(node);
             layout.getCurrentDocument()!.body.addEventListener("mousedown", onEndEdit);
             layout.getCurrentDocument()!.body.addEventListener("touchstart", onEndEdit);
-        } 
+        }
         // else {
         //     const parentNode = node.getParent() as TabSetNode;
         //     if (parentNode.canMaximize()) {
@@ -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,55 +146,24 @@ export const TabButton = (props: ITabButtonProps) => {
         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 (typeof leadingContent === undefined && typeof 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);
 
-    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"}
                 type="text"
                 autoFocus={true}
                 defaultValue={node.getName()}
@@ -208,8 +176,14 @@ export const TabButton = (props: ITabButtonProps) => {
 
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
-        buttons.push(
-            <div key="close" title={closeTitle} className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)} onMouseDown={onCloseMouseDown} onClick={onClose} onTouchStart={onCloseMouseDown}>
+        renderState.buttons.push(
+            <div
+                key="close"
+                data-layout-path={path + "/button/close"}
+                title={closeTitle}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING)}
+                onMouseDown={onCloseMouseDown} onClick={onClose}
+                onTouchStart={onCloseMouseDown}>
                 {icons?.close}
             </div>
         );
@@ -218,9 +192,7 @@ export const TabButton = (props: ITabButtonProps) => {
     return (
         <div
             ref={selfRef}
-            style={{
-                visibility: show ? "visible" : "hidden",
-            }}
+            data-layout-path={path}
             className={classNames}
             onMouseDown={onMouseDown}
             onClick={onAuxMouseClick}
@@ -231,7 +203,7 @@ export const TabButton = (props: ITabButtonProps) => {
         >
             {leading}
             {content}
-            {buttons}
+            {renderState.buttons}
         </div>
     );
 };

package/src/view/TabButtonStamp.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import TabNode from "../model/TabNode";
+import { ILayoutCallbacks } from "./Layout";
+import { CLASSES } from "../Types";
+import { getRenderStateEx } from "./Utils";
+
+/** @hidden @internal */
+export interface ITabButtonStampProps {
+    node: TabNode;
+    layout: ILayoutCallbacks;
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+}
+
+/** @hidden @internal */
+export const TabButtonStamp = (props: ITabButtonStampProps) => {
+    const { layout, node, iconFactory, titleFactory } = props;
+    const selfRef = React.useRef<HTMLDivElement | null>(null);
+
+    const cm = layout.getClassName;
+
+    let classNames = cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_STAMP);
+
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
+
+    let content = renderState.content ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
+            {renderState.content}
+        </div>)
+        : node._getNameForOverflowMenu();
+
+    const leading = renderState.leading ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>
+            {renderState.leading}
+        </div>) : null;
+
+    return (
+        <div
+            ref={selfRef}
+            className={classNames}
+            title={node.getHelpText()}
+        >
+            {leading}
+            {content}
+        </div>
+    );
+};