flexlayout-react 0.7.11 → 0.7.13

package/src/view/Layout.tsx

@@ -166,11 +166,11 @@ export interface ILayoutCallbacks {
     getPopoutURL(): string;
     isSupportsPopout(): boolean;
     isRealtimeResize(): boolean;
-    getCurrentDocument(): HTMLDocument | undefined;
+    getCurrentDocument(): Document | undefined;
     getClassName(defaultClassName: string): string;
     doAction(action: Action): Node | undefined;
-    getDomRect(): any;
-    getRootDiv(): HTMLDivElement;
+    getDomRect(): DOMRect | undefined;
+    getRootDiv(): HTMLDivElement | null;
     dragStart(
         event: Event | React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement> | React.DragEvent<HTMLDivElement> | undefined,
         dragDivText: string | undefined,
@@ -260,7 +260,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @internal */
     private fnNewNodeDropped?: (node?: Node, event?: Event) => void;
     /** @internal */
-    private currentDocument?: HTMLDocument;
+    private currentDocument?: Document;
     /** @internal */
     private currentWindow?: Window;
     /** @internal */
@@ -350,7 +350,10 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.resizeObserver = new ResizeObserver(entries => {
             this.updateRect(entries[0].contentRect);
         });
-        this.resizeObserver.observe(this.selfRef.current!);
+        const selfRefCurr = this.selfRef.current;
+        if (selfRefCurr) {
+            this.resizeObserver.observe(selfRefCurr);
+        }
     }
 
     /** @internal */
@@ -367,7 +370,14 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     }
 
     /** @internal */
-    updateRect = (domRect: DOMRectReadOnly = this.getDomRect()) => {
+    updateRect = (domRect?: DOMRectReadOnly) => {
+        if (!domRect) {
+            domRect = this.getDomRect();
+        }
+        if (!domRect) {
+            // no dom rect available, return.
+            return;
+        }
         const rect = new Rect(0, 0, domRect.width, domRect.height);
         if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
             this.setState({ rect });
@@ -412,12 +422,12 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
     /** @internal */
     getDomRect() {
-        return this.selfRef.current!.getBoundingClientRect();
+        return this.selfRef.current?.getBoundingClientRect();
     }
 
     /** @internal */
     getRootDiv() {
-        return this.selfRef.current!;
+        return this.selfRef.current;
     }
 
     /** @internal */
@@ -442,7 +452,10 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
     /** @internal */
     componentWillUnmount() {
-        this.resizeObserver?.unobserve(this.selfRef.current!)
+        const selfRefCurr = this.selfRef.current;
+        if (selfRefCurr) {
+            this.resizeObserver?.unobserve(selfRefCurr);
+        }
     }
 
     /** @internal */
@@ -601,10 +614,12 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
                             const tabBorderWidth = child._getAttr("borderWidth");
                             const tabBorderHeight = child._getAttr("borderHeight");
-                            if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === Orientation.HORZ) {
-                                rect.width = tabBorderWidth;
-                            } else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === Orientation.VERT) {
-                                rect.height = tabBorderHeight;
+                            if (rect) {
+                                if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === Orientation.HORZ) {
+                                    rect.width = tabBorderWidth;
+                                } else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === Orientation.VERT) {
+                                    rect.height = tabBorderHeight;
+                                }
                             }
 
                             floatingWindows.push(
@@ -693,7 +708,11 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @internal */
     _getScreenRect(node: TabNode) {
         const rect = node!.getRect()!.clone();
-        const bodyRect: DOMRect = this.selfRef.current!.getBoundingClientRect();
+        const bodyRect: DOMRect | undefined =
+            this.selfRef.current?.getBoundingClientRect();
+        if (!bodyRect) {
+            return null;
+        }
         const navHeight = Math.min(80, this.currentWindow!.outerHeight - this.currentWindow!.innerHeight);
         const navWidth = Math.min(80, this.currentWindow!.outerWidth - this.currentWindow!.innerWidth);
         rect.x = rect.x + bodyRect.x + this.currentWindow!.screenX + navWidth;
@@ -705,23 +724,29 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
      * Adds a new tab to the given tabset
      * @param tabsetId the id of the tabset where the new tab will be added
      * @param json the json for the new tab node
+     * @returns the added tab node or undefined
      */
-    addTabToTabSet(tabsetId: string, json: IJsonTabNode) {
+    addTabToTabSet(tabsetId: string, json: IJsonTabNode) : TabNode | undefined {
         const tabsetNode = this.props.model.getNodeById(tabsetId);
         if (tabsetNode !== undefined) {
-            this.doAction(Actions.addNode(json, tabsetId, DockLocation.CENTER, -1));
+            const node = this.doAction(Actions.addNode(json, tabsetId, DockLocation.CENTER, -1));
+            return node as TabNode;
         }
+        return undefined;
     }
 
     /**
      * Adds a new tab to the active tabset (if there is one)
      * @param json the json for the new tab node
+     * @returns the added tab node or undefined
      */
-    addTabToActiveTabSet(json: IJsonTabNode) {
+    addTabToActiveTabSet(json: IJsonTabNode) : TabNode | undefined {
         const tabsetNode = this.props.model.getActiveTabset();
         if (tabsetNode !== undefined) {
-            this.doAction(Actions.addNode(json, tabsetNode.getId(), DockLocation.CENTER, -1));
+            const node = this.doAction(Actions.addNode(json, tabsetNode.getId(), DockLocation.CENTER, -1));
+            return node as TabNode;
         }
+        return undefined;
     }
 
     /**
@@ -785,7 +810,9 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @internal */
     onCancelAdd = () => {
         const rootdiv = this.selfRef.current;
-        rootdiv!.removeChild(this.dragDiv!);
+        if (rootdiv && this.dragDiv) {
+            rootdiv.removeChild(this.dragDiv);
+        }
         this.dragDiv = undefined;
         this.hidePortal();
         if (this.fnNewNodeDropped != null) {
@@ -807,15 +834,21 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     /** @internal */
     onCancelDrag = (wasDragging: boolean) => {
         if (wasDragging) {
-            const rootdiv = this.selfRef.current!;
+            const rootdiv = this.selfRef.current;
 
-            try {
-                rootdiv.removeChild(this.outlineDiv!);
-            } catch (e) { }
+            const outlineDiv = this.outlineDiv;
+            if (rootdiv && outlineDiv) {
+                try {
+                    rootdiv.removeChild(outlineDiv);
+                } catch (e) {}
+            }
 
-            try {
-                rootdiv.removeChild(this.dragDiv!);
-            } catch (e) { }
+            const dragDiv = this.dragDiv;
+            if (rootdiv && dragDiv) {
+                try {
+                    rootdiv.removeChild(dragDiv);
+                } catch (e) {}
+            }
 
             this.dragDiv = undefined;
             this.hidePortal();
@@ -855,11 +888,31 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         onDoubleClick?: (event: Event) => void
     ) => {
         if (!allowDrag) {
-            DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, this.currentDocument, this.selfRef.current!);
+            DragDrop.instance.startDrag(
+                event,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                onClick,
+                onDoubleClick,
+                this.currentDocument,
+                this.selfRef.current ?? undefined
+            );
         } else {
             this.dragNode = node;
             this.dragDivText = dragDivText;
-            DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, this.selfRef.current!);
+            DragDrop.instance.startDrag(
+                event,
+                this.onDragStart,
+                this.onDragMove,
+                this.onDragEnd,
+                this.onCancelDrag,
+                onClick,
+                onDoubleClick,
+                this.currentDocument,
+                this.selfRef.current ?? undefined
+            );
         }
     };
 
@@ -888,18 +941,22 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
 
         // hide div until the render is complete
-        this.dragDiv!.style.visibility = "hidden";
         this.dragRectRendered = false;
-        this.showPortal(
-            <DragRectRenderWrapper
-                // wait for it to be rendered
-                onRendered={() => {
-                    this.dragRectRendered = true;
-                    onRendered?.();
-                }}>
-                {content}
-            </DragRectRenderWrapper>,
-            this.dragDiv!);
+        const dragDiv = this.dragDiv;
+        if (dragDiv) {
+            dragDiv.style.visibility = "hidden";
+            this.showPortal(
+                <DragRectRenderWrapper
+                    // wait for it to be rendered
+                    onRendered={() => {
+                        this.dragRectRendered = true;
+                        onRendered?.();
+                    }}>
+                    {content}
+                </DragRectRenderWrapper>,
+                dragDiv,
+            );
+        }
     };
 
     /** @internal */
@@ -917,11 +974,13 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     onDragStart = () => {
         this.dropInfo = undefined;
         this.customDrop = undefined;
-        const rootdiv = this.selfRef.current!;
+        const rootdiv = this.selfRef.current;
         this.outlineDiv = this.currentDocument!.createElement("div");
         this.outlineDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__OUTLINE_RECT);
         this.outlineDiv.style.visibility = "hidden";
-        rootdiv.appendChild(this.outlineDiv);
+        if (rootdiv) {
+            rootdiv.appendChild(this.outlineDiv);
+        }
 
         if (this.dragDiv == null) {
             this.dragDiv = this.currentDocument!.createElement("div");
@@ -929,15 +988,17 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
             this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
 
-            rootdiv.appendChild(this.dragDiv);
+            if (rootdiv) {
+                rootdiv.appendChild(this.dragDiv);
+            }
         }
         // add edge indicators
         if (this.props.model.getMaximizedTabset() === undefined) {
             this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
         }
 
-        if (this.dragNode !== undefined && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== undefined) {
-            this.dragNode.getTabRect()!.positionElement(this.outlineDiv);
+        if (this.dragNode && this.outlineDiv && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== undefined) {
+            this.dragNode.getTabRect()?.positionElement(this.outlineDiv);
         }
         this.firstMove = true;
 
@@ -948,30 +1009,34 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     onDragMove = (event: React.MouseEvent<Element>) => {
         if (this.firstMove === false) {
             const speed = this.props.model._getAttribute("tabDragSpeed") as number;
-            this.outlineDiv!.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
+            if (this.outlineDiv) {
+                this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
+            }
         }
         this.firstMove = false;
-        const clientRect = this.selfRef.current!.getBoundingClientRect();
+        const clientRect = this.selfRef.current?.getBoundingClientRect();
         const pos = {
-            x: event.clientX - clientRect.left,
-            y: event.clientY - clientRect.top,
+            x: event.clientX - (clientRect?.left ?? 0),
+            y: event.clientY - (clientRect?.top ?? 0),
         };
 
         this.checkForBorderToShow(pos.x, pos.y);
 
         // keep it between left & right
-        const dragRect = this.dragDiv!.getBoundingClientRect();
+        const dragRect = this.dragDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
         let newLeft = pos.x - dragRect.width / 2;
-        if (newLeft + dragRect.width > clientRect.width) {
-            newLeft = clientRect.width - dragRect.width;
+        if (newLeft + dragRect.width > (clientRect?.width ?? 0)) {
+            newLeft = (clientRect?.width ?? 0) - dragRect.width;
         }
         newLeft = Math.max(0, newLeft);
 
-        this.dragDiv!.style.left = newLeft + "px";
-        this.dragDiv!.style.top = pos.y + 5 + "px";
-        if (this.dragRectRendered && this.dragDiv!.style.visibility === "hidden") {
-            // make visible once the drag rect has been rendered
-            this.dragDiv!.style.visibility = "visible";
+        if (this.dragDiv) {
+            this.dragDiv.style.left = newLeft + "px";
+            this.dragDiv.style.top = pos.y + 5 + "px";
+            if (this.dragRectRendered && this.dragDiv.style.visibility === "hidden") {
+                // make visible once the drag rect has been rendered
+                this.dragDiv.style.visibility = "visible";
+            }
         }
 
         let dropInfo = this.props.model._findDropTargetNode(this.dragNode!, pos.x, pos.y);
@@ -980,18 +1045,26 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 this.handleCustomTabDrag(dropInfo, pos, event);
             } else {
                 this.dropInfo = dropInfo;
-                this.outlineDiv!.className = this.getClassName(dropInfo.className);
-                dropInfo.rect.positionElement(this.outlineDiv!);
-                this.outlineDiv!.style.visibility = "visible";
+                if (this.outlineDiv) {
+                    this.outlineDiv.className = this.getClassName(dropInfo.className);
+                    dropInfo.rect.positionElement(this.outlineDiv);
+                    this.outlineDiv.style.visibility = "visible";
+                }
             }
         }
     };
 
     /** @internal */
     onDragEnd = (event: Event) => {
-        const rootdiv = this.selfRef.current!;
-        rootdiv.removeChild(this.outlineDiv!);
-        rootdiv.removeChild(this.dragDiv!);
+        const rootdiv = this.selfRef.current;
+        if (rootdiv) {
+            if (this.outlineDiv) {
+                rootdiv.removeChild(this.outlineDiv);
+            }
+            if (this.dragDiv) {
+                rootdiv.removeChild(this.dragDiv);
+            }
+        }
         this.dragDiv = undefined;
         this.hidePortal();
 
@@ -1070,16 +1143,19 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
 
         this.dropInfo = dropInfo;
-        this.outlineDiv!.className = this.getClassName(this.customDrop ? CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);
-
-        if (this.customDrop) {
-            this.customDrop.rect.positionElement(this.outlineDiv!);
-        } else {
-            dropInfo.rect.positionElement(this.outlineDiv!);
+        if (this.outlineDiv) {
+            this.outlineDiv.className = this.getClassName(this.customDrop ? CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);
+            if (this.customDrop) {
+                this.customDrop.rect.positionElement(this.outlineDiv);
+            } else {
+                dropInfo.rect.positionElement(this.outlineDiv);
+            }
         }
 
         DragDrop.instance.setGlassCursorOverride(this.customDrop?.cursor);
-        this.outlineDiv!.style.visibility = "visible";
+        if (this.outlineDiv) {
+            this.outlineDiv.style.visibility = "visible";
+        }
 
         try {
             invalidated?.();

package/src/view/Splitter.tsx

@@ -24,9 +24,28 @@ export const Splitter = (props: ISplitterProps) => {
     const outlineDiv = React.useRef<HTMLDivElement | undefined>(undefined);
     const parentNode = node.getParent() as RowNode | BorderNode;
 
-    const onMouseDown = (event: Event | React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        DragDrop.instance.setGlassCursorOverride(node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize");
-        DragDrop.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, undefined, undefined, layout.getCurrentDocument(), layout.getRootDiv());
+    const onMouseDown = (
+        event:
+            | Event
+            | React.MouseEvent<HTMLDivElement, MouseEvent>
+            | React.TouchEvent<HTMLDivElement>
+    ) => {
+        DragDrop.instance.setGlassCursorOverride(
+            node.getOrientation() === Orientation.HORZ
+                ? "ns-resize"
+                : "ew-resize"
+        );
+        DragDrop.instance.startDrag(
+            event,
+            onDragStart,
+            onDragMove,
+            onDragEnd,
+            onDragCancel,
+            undefined,
+            undefined,
+            layout.getCurrentDocument(),
+            layout.getRootDiv() ?? undefined
+        );
         pBounds.current = parentNode._getSplitterBounds(node, true);
         const rootdiv = layout.getRootDiv();
         outlineDiv.current = layout.getCurrentDocument()!.createElement("div");
@@ -41,12 +60,16 @@ export const Splitter = (props: ISplitterProps) => {
         }
 
         r.positionElement(outlineDiv.current);
-        rootdiv.appendChild(outlineDiv.current);
+        if (rootdiv) {
+            rootdiv.appendChild(outlineDiv.current);
+        }
     };
 
-    const onDragCancel = (wasDragging: boolean) => {
+    const onDragCancel = (_wasDragging: boolean) => {
         const rootdiv = layout.getRootDiv();
-        rootdiv.removeChild(outlineDiv.current as Element);
+        if (rootdiv) {
+            rootdiv.removeChild(outlineDiv.current as Element);
+        }
     };
 
     const onDragStart = () => {
@@ -55,6 +78,10 @@ export const Splitter = (props: ISplitterProps) => {
 
     const onDragMove = (event: React.MouseEvent<Element, MouseEvent>) => {
         const clientRect = layout.getDomRect();
+        if (!clientRect) {
+            return;
+        }
+
         const pos = {
             x: event.clientX - clientRect.left,
             y: event.clientY - clientRect.top,
@@ -98,7 +125,9 @@ export const Splitter = (props: ISplitterProps) => {
         updateLayout();
 
         const rootdiv = layout.getRootDiv();
-        rootdiv.removeChild(outlineDiv.current as HTMLDivElement);
+        if (rootdiv) {
+            rootdiv.removeChild(outlineDiv.current as HTMLDivElement);
+        }
     };
 
     const getBoundPosition = (p: number) => {

package/src/view/Tab.tsx

@@ -66,6 +66,10 @@ export const Tab = (props: ITabProps) => {
         className += " " + cm(CLASSES.FLEXLAYOUT__TAB_BORDER);
         className += " " + cm(CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());
     }
+    
+    if (node.getContentClassName() !== undefined) {
+        className += " " + node.getContentClassName();
+    }
 
     return (
         <div

package/src/view/TabButton.tsx

@@ -103,8 +103,17 @@ export const TabButton = (props: ITabButtonProps) => {
     const updateRect = () => {
         // record position of tab in node
         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));
+        const r = selfRef.current?.getBoundingClientRect();
+        if (r && layoutRect) {
+            node._setTabRect(
+                new Rect(
+                    r.left - layoutRect.left,
+                    r.top - layoutRect.top,
+                    r.width,
+                    r.height
+                )
+            );
+        }
     };
 
     const onTextBoxMouseDown = (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => {
@@ -113,11 +122,10 @@ export const TabButton = (props: ITabButtonProps) => {
     };
 
     const onTextBoxKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        // console.log(event, event.keyCode);
-        if (event.keyCode === 27) {
+        if (event.code === 'Escape') {
             // esc
             layout.setEditingTab(undefined);
-        } else if (event.keyCode === 13) {
+        } else if (event.code === 'Enter') {
             // enter
             layout.setEditingTab(undefined);
             layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value));
@@ -127,14 +135,17 @@ export const TabButton = (props: ITabButtonProps) => {
     const cm = layout.getClassName;
     const parentNode = node.getParent() as TabSetNode;
 
-    let baseClassName = CLASSES.FLEXLAYOUT__TAB_BUTTON;
+    const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;
+    let baseClassName = isStretch ? CLASSES.FLEXLAYOUT__TAB_BUTTON_STRETCH : CLASSES.FLEXLAYOUT__TAB_BUTTON;
     let classNames = cm(baseClassName);
     classNames += " " + cm(baseClassName + "_" + parentNode.getTabLocation());
 
-    if (selected) {
-        classNames += " " + cm(baseClassName + "--selected");
-    } else {
-        classNames += " " + cm(baseClassName + "--unselected");
+    if (!isStretch) {
+        if (selected) {
+            classNames += " " + cm(baseClassName + "--selected");
+        } else {
+            classNames += " " + cm(baseClassName + "--unselected");
+        }
     }
 
     if (node.getClassName() !== undefined) {
@@ -169,7 +180,7 @@ export const TabButton = (props: ITabButtonProps) => {
         );
     }
 
-    if (node.isEnableClose()) {
+    if (node.isEnableClose() && !isStretch) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
         renderState.buttons.push(
             <div

package/src/view/TabOverflowHook.tsx

@@ -31,13 +31,16 @@ export const useTabOverflow = (
         updateVisibleTabs();
     });
 
+    const instance = selfRef.current;
     React.useEffect(() => {
-        const instance = selfRef.current!;
-        instance.addEventListener('wheel', onWheel, { passive: false });
-        return () => {
-            instance.removeEventListener('wheel', onWheel);
+        if (!instance) {
+            return;
         }
-    }, []);
+        instance.addEventListener("wheel", onWheel, { passive: false });
+        return () => {
+            instance.removeEventListener("wheel", onWheel);
+        };
+    }, [instance]);
 
     // needed to prevent default mouse wheel over tabset/border (cannot do with react event?)
     const onWheel = (event: Event) => {

package/src/view/TabSet.tsx

@@ -102,6 +102,11 @@ export const TabSet = (props: ITabSetProps) => {
         event.stopPropagation();
     };
 
+    const onCloseTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        layout.doAction(Actions.deleteTab(node.getChildren()[0].getId()));
+        event.stopPropagation();
+    };
+
     const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
@@ -167,12 +172,15 @@ export const TabSet = (props: ITabSetProps) => {
     buttons = renderState.buttons;
     headerButtons = renderState.headerButtons;
 
+    const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;
+    const showClose = (isTabStretch && ((node.getChildren()[0] as TabNode).isEnableClose())) || node.isEnableClose();
+
     if (renderState.overflowPosition === undefined) {
         renderState.overflowPosition = stickyButtons.length;
     }
     
     if (stickyButtons.length > 0) {
-        if (tabsTruncated) {
+        if (tabsTruncated || isTabStretch) {
             buttons = [...stickyButtons, ...buttons];
         } else {
             tabs.push(<div
@@ -253,8 +261,8 @@ export const TabSet = (props: ITabSetProps) => {
         );
     }
 
-    if (!node.isMaximized() && node.isEnableClose()) {
-        const title = layout.i18nName(I18nLabel.Close_Tabset);
+    if (!node.isMaximized() && showClose) {
+        const title = isTabStretch ? layout.i18nName(I18nLabel.Close_Tab) : layout.i18nName(I18nLabel.Close_Tabset);
         const btns = showHeader ? headerButtons : buttons;
         btns.push(
             <button
@@ -262,7 +270,7 @@ export const TabSet = (props: ITabSetProps) => {
                 data-layout-path={path + "/button/close"}
                 title={title}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE)}
-                onClick={onClose}
+                onClick={isTabStretch ? onCloseTab : onClose}
                 onMouseDown={onInterceptMouseDown}
                 onTouchStart={onInterceptMouseDown}
             >
@@ -348,7 +356,7 @@ export const TabSet = (props: ITabSetProps) => {
             onTouchStart={onMouseDown}>
             <div ref={tabbarInnerRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}>
                 <div
-                    style={{ left: position }}
+                    style={{ left: position, width: (isTabStretch? "100%": "10000px")}}
                     className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation())}
                 >
                     {tabs}

package/style/_base.scss

@@ -208,6 +208,27 @@
             cursor: pointer;
             @include tab_button_mixin;
 
+            &_stretch {
+                background-color: transparent;
+                color:var(--color-tab-selected);
+                width: 100%;
+                padding: 3px 0em;
+                text-wrap: nowrap;
+                display: flex;
+                gap: 0.3em;
+                align-items: center;
+                box-sizing: border-box;
+                cursor: pointer;
+                @include tab_button_stretch_mixin;
+
+                @media (hover: hover) {
+                    &:hover {
+                        color:var(--color-tab-selected);
+                        @include tab_button_stretch_hovered_mixin;
+                    }
+                }
+            }
+
             &--selected {
                 background-color:var(--color-tab-selected-background);
                 color:var(--color-tab-selected);