flexlayout-react 0.7.15 → 0.8.1

package/src/view/TabSet.tsx

@@ -3,35 +3,52 @@ import { I18nLabel } from "../I18nLabel";
 import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
-import { showPopup } from "../PopupMenu";
-import { IIcons, ILayoutCallbacks, ITabSetRenderValues, ITitleObject } from "./Layout";
+import { showPopup } from "./PopupMenu";
+import { LayoutInternal, ITabSetRenderValues } from "./Layout";
 import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import { Orientation } from "../Orientation";
 import { CLASSES } from "../Types";
-import { hideElement, isAuxMouseEvent } from "./Utils";
+import { isAuxMouseEvent } from "./Utils";
+import { createPortal } from "react-dom";
+import { Rect } from "../Rect";
 
 /** @internal */
 export interface ITabSetProps {
-    layout: ILayoutCallbacks;
+    layout: LayoutInternal;
     node: TabSetNode;
-    iconFactory?: (node: TabNode) => (React.ReactNode | undefined);
-    titleFactory?: (node: TabNode) => (ITitleObject | React.ReactNode | undefined);
-    icons: IIcons;
-    editingTab?: TabNode;
-    path?: string;
 }
 
 /** @internal */
 export const TabSet = (props: ITabSetProps) => {
-    const { node, layout, iconFactory, titleFactory, icons, path } = props;
+    const { node, layout } = props;
 
-    const toolbarRef = React.useRef<HTMLDivElement | null>(null);
+    const tabStripRef = React.useRef<HTMLDivElement | null>(null);
+    const tabStripInnerRef = React.useRef<HTMLDivElement | null>(null);
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
+    const buttonBarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
-    const tabbarInnerRef = React.useRef<HTMLDivElement | null>(null);
     const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null);
 
-    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, toolbarRef, stickyButtonsRef);
+    const icons = layout.getIcons();
+
+    // must use useEffect (rather than useLayoutEffect) otherwise contentrect not set correctly (has height 0 when changing theme in demo)
+    React.useEffect(() => {
+        node.setRect(layout.getBoundingClientRect(selfRef.current!));
+
+        if (tabStripRef.current) {
+            node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current!));
+        }
+
+        const newContentRect = Rect.getContentRect(contentRef.current!).relativeTo(layout.getDomRect()!);
+        if (!node.getContentRect().equals(newContentRect)) {
+            node.setContentRect(newContentRect);
+            layout.redrawInternal("tabset content rect " + newContentRect);
+        }
+    });
+
+    // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)
+    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, buttonBarRef, stickyButtonsRef);
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const callback = layout.getShowOverflowMenu();
@@ -43,9 +60,7 @@ export const TabSet = (props: ITabSetProps) => {
                 element,
                 hiddenTabs,
                 onOverflowItemSelect,
-                layout,
-                iconFactory,
-                titleFactory,
+                layout
             );
         }
         event.stopPropagation();
@@ -56,7 +71,20 @@ export const TabSet = (props: ITabSetProps) => {
         userControlledLeft.current = false;
     };
 
-    const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
+    const onDragStart = (event: React.DragEvent<HTMLElement>) => {
+        if (!layout.getEditingTab()) {
+            if (node.isEnableDrag()) {
+                event.stopPropagation();
+                layout.setDragNode(event.nativeEvent, node as TabSetNode);
+            } else {
+                event.preventDefault();
+            }
+        } else {
+            event.preventDefault();
+        }
+    };
+
+    const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {
         if (!isAuxMouseEvent(event)) {
             let name = node.getName();
             if (name === undefined) {
@@ -64,29 +92,21 @@ export const TabSet = (props: ITabSetProps) => {
             } else {
                 name = ": " + name;
             }
-            layout.doAction(Actions.setActiveTabset(node.getId()));
-            if (!layout.getEditingTab()) {
-                const message = layout.i18nName(I18nLabel.Move_Tabset, name);
-                if (node.getModel().getMaximizedTabset() !== undefined) {
-                    layout.dragStart(event, message, node, false, (event2: Event) => undefined, onDoubleClick);
-                } else {
-                    layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
-                }
-            }
+            layout.doAction(Actions.setActiveTabset(node.getId(), layout.getWindowId()));
         }
     };
 
-    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (isAuxMouseEvent(event)) {
             layout.auxMouseClick(node, event);
         }
     };
 
-    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         layout.showContextMenu(node, event);
     };
 
-    const onInterceptMouseDown = (event: React.MouseEvent | React.TouchEvent) => {
+    const onInterceptPointerDown = (event: React.PointerEvent) => {
         event.stopPropagation();
     };
 
@@ -107,33 +127,31 @@ export const TabSet = (props: ITabSetProps) => {
         event.stopPropagation();
     };
 
-    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    const onPopoutTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (selectedTabNode !== undefined) {
-            layout.doAction(Actions.floatTab(selectedTabNode.getId()));
+            layout.doAction(Actions.popoutTab(selectedTabNode.getId()));
+            // layout.doAction(Actions.popoutTabset(node.getId()));
         }
         event.stopPropagation();
     };
 
-    const onDoubleClick = (event: Event) => {
+    const onDoubleClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (node.canMaximize()) {
             layout.maximize(node);
         }
     };
 
     // Start Render
+
     const cm = layout.getClassName;
 
     // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0
-    if (tabbarInnerRef.current !== null && tabbarInnerRef.current!.scrollLeft !== 0) {
-        tabbarInnerRef.current.scrollLeft = 0;
+    if (tabStripInnerRef.current !== null && tabStripInnerRef.current!.scrollLeft !== 0) {
+        tabStripInnerRef.current.scrollLeft = 0;
     }
 
     const selectedTabNode: TabNode = node.getSelectedNode() as TabNode;
-    let style = node._styleWithPosition();
-
-    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {
-        hideElement(style, node.getModel().isUseVisibility())
-    }
+    const path = node.getPath();
 
     const tabs = [];
     if (node.isEnableTabStrip()) {
@@ -147,30 +165,23 @@ export const TabSet = (props: ITabSetProps) => {
                     path={path + "/tb" + i}
                     key={child.getId()}
                     selected={isSelected}
-                    iconFactory={iconFactory}
-                    titleFactory={titleFactory}
-                    icons={icons}
                 />);
-                if (i < node.getChildren().length-1) {
-                    tabs.push(
-                        <div  key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER)}></div>
-                    );
-                }
+            if (i < node.getChildren().length - 1) {
+                tabs.push(
+                    <div key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER)}></div>
+                );
+            }
         }
     }
 
-    const showHeader = node.getName() !== undefined;
     let stickyButtons: React.ReactNode[] = [];
     let buttons: React.ReactNode[] = [];
-    let headerButtons: React.ReactNode[] = [];
 
     // allow customization of header contents and buttons
-    const renderState : ITabSetRenderValues = { headerContent: node.getName(), stickyButtons, buttons, headerButtons, overflowPosition: undefined };
+    const renderState: ITabSetRenderValues = { stickyButtons, buttons, overflowPosition: undefined };
     layout.customizeTabSet(node, renderState);
-    const headerContent = renderState.headerContent;
     stickyButtons = renderState.stickyButtons;
     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();
@@ -178,16 +189,15 @@ export const TabSet = (props: ITabSetProps) => {
     if (renderState.overflowPosition === undefined) {
         renderState.overflowPosition = stickyButtons.length;
     }
-    
+
     if (stickyButtons.length > 0) {
-        if (tabsTruncated || isTabStretch) {
+        if (!node.isEnableTabWrap() && (tabsTruncated || isTabStretch)) {
             buttons = [...stickyButtons, ...buttons];
         } else {
             tabs.push(<div
                 ref={stickyButtonsRef}
                 key="sticky_buttons_container"
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
+                onPointerDown={onInterceptPointerDown}
                 onDragStart={(e) => { e.preventDefault() }}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)}
             >
@@ -195,64 +205,67 @@ export const TabSet = (props: ITabSetProps) => {
             </div>);
         }
     }
-    
-    if (hiddenTabs.length > 0) {
-        const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
-        let overflowContent;
-        if (typeof icons.more === "function") {
-            overflowContent = icons.more(node, hiddenTabs);
-        } else {
-            overflowContent = (<>
-                {icons.more}
-                <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
-            </>);
+
+    if (!node.isEnableTabWrap()) {
+         if (hiddenTabs.length > 0) {
+            const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
+            let overflowContent;
+            if (typeof icons.more === "function") {
+                overflowContent = icons.more(node, hiddenTabs);
+            } else {
+                overflowContent = (<>
+                    {icons.more}
+                    <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
+                </>);
+            }
+            buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,
+                <button
+                    key="overflowbutton"
+                    data-layout-path={path + "/button/overflow"}
+
+                    ref={overflowbuttonRef}
+                    className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
+                    title={overflowTitle}
+                    onClick={onOverflowClick}
+                    onPointerDown={onInterceptPointerDown}
+                >
+                    {overflowContent}
+                </button>
+            );
         }
-        buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,
-            <button
-                key="overflowbutton"
-                data-layout-path={path + "/button/overflow"}
-
-                ref={overflowbuttonRef}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
-                title={overflowTitle}
-                onClick={onOverflowClick}
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
-            >
-                {overflowContent}
-            </button>
-        );
     }
 
-    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {
-        const floatTitle = layout.i18nName(I18nLabel.Float_Tab);
+    if (selectedTabNode !== undefined && 
+        layout.isSupportsPopout() && 
+        selectedTabNode.isEnablePopout() && 
+        selectedTabNode.isEnablePopoutIcon() ) {
+
+        const popoutTitle = layout.i18nName(I18nLabel.Popout_Tab);
         buttons.push(
             <button
-                key="float"
-                data-layout-path={path + "/button/float"}
-                title={floatTitle}
+                key="popout"
+                data-layout-path={path + "/button/popout"}
+                title={popoutTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT)}
-                onClick={onFloatTab}
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
+                onClick={onPopoutTab}
+                onPointerDown={onInterceptPointerDown}
             >
                 {(typeof icons.popout === "function") ? icons.popout(selectedTabNode) : icons.popout}
             </button>
         );
     }
+
     if (node.canMaximize()) {
         const minTitle = layout.i18nName(I18nLabel.Restore);
         const maxTitle = layout.i18nName(I18nLabel.Maximize);
-        const btns = showHeader ? headerButtons : buttons;
-        btns.push(
+        buttons.push(
             <button
                 key="max"
                 data-layout-path={path + "/button/max"}
                 title={node.isMaximized() ? minTitle : maxTitle}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? "max" : "min"))}
                 onClick={onMaximizeToggle}
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
+                onPointerDown={onInterceptPointerDown}
             >
                 {node.isMaximized() ?
                     (typeof icons.restore === "function") ? icons.restore(node) : icons.restore :
@@ -263,34 +276,44 @@ export const TabSet = (props: ITabSetProps) => {
 
     if (!node.isMaximized() && showClose) {
         const title = isTabStretch ? layout.i18nName(I18nLabel.Close_Tab) : layout.i18nName(I18nLabel.Close_Tabset);
-        const btns = showHeader ? headerButtons : buttons;
-        btns.push(
+        buttons.push(
             <button
                 key="close"
                 data-layout-path={path + "/button/close"}
                 title={title}
                 className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE)}
                 onClick={isTabStretch ? onCloseTab : onClose}
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
+                onPointerDown={onInterceptPointerDown}
             >
                 {(typeof icons.closeTabset === "function") ? icons.closeTabset(node) : icons.closeTabset}
             </button>
         );
     }
 
-    const toolbar = (
-        <div key="toolbar" ref={toolbarRef}
+    if (node.isActive() && node.isEnableActiveIcon()) {
+        const title = layout.i18nName(I18nLabel.Active_Tabset);
+        buttons.push(
+            <div
+                key="active"
+                data-layout-path={path + "/button/active"}
+                title={title}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON) }
+            >
+                {(typeof icons.activeTabset === "function") ? icons.activeTabset(node) : icons.activeTabset}
+            </div>
+        );
+    }
+
+    const buttonbar = (
+        <div key="buttonbar" ref={buttonBarRef}
             className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR)}
-            onMouseDown={onInterceptMouseDown}
-            onTouchStart={onInterceptMouseDown}
+            onPointerDown={onInterceptPointerDown}
             onDragStart={(e) => { e.preventDefault() }}
         >
             {buttons}
         </div>
     );
 
-    let header;
     let tabStrip;
 
     let tabStripClasses = cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);
@@ -299,111 +322,133 @@ export const TabSet = (props: ITabSetProps) => {
     }
     tabStripClasses += " " + CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();
 
-    if (node.isActive() && !showHeader) {
+    if (node.isActive()) {
         tabStripClasses += " " + cm(CLASSES.FLEXLAYOUT__TABSET_SELECTED);
     }
 
-    if (node.isMaximized() && !showHeader) {
+    if (node.isMaximized()) {
         tabStripClasses += " " + cm(CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);
     }
 
     if (isTabStretch) {
-        const tabNode = node.getChildren()[0] as TabNode; 
+        const tabNode = node.getChildren()[0] as TabNode;
         if (tabNode.getTabSetClassName() !== undefined) {
             tabStripClasses += " " + tabNode.getTabSetClassName();
         }
     }
 
-    if (showHeader) {
-
-        const headerToolbar = (
-            <div key="toolbar" ref={toolbarRef}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR)}
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
-                onDragStart={(e) => { e.preventDefault() }}
-            >
-                {headerButtons}
-            </div>
-        );
-
-        let tabHeaderClasses = cm(CLASSES.FLEXLAYOUT__TABSET_HEADER);
-        if (node.isActive()) {
-            tabHeaderClasses += " " + cm(CLASSES.FLEXLAYOUT__TABSET_SELECTED);
-        }
-        if (node.isMaximized()) {
-            tabHeaderClasses += " " + cm(CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);
-        }
-        if (node.getClassNameHeader() !== undefined) {
-            tabHeaderClasses += " " + node.getClassNameHeader();
-        }
-
-        header = (
-            <div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }}
-                data-layout-path={path + "/header"}
-                onMouseDown={onMouseDown}
-                onContextMenu={onContextMenu}
-                onClick={onAuxMouseClick}
-                onAuxClick={onAuxMouseClick}
-                onTouchStart={onMouseDown}>
-                <div className={cm(CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT)}>{headerContent}</div>
-                {headerToolbar}
-            </div>
-        );
-    }
-
-    const tabStripStyle: { [key: string]: string } = { height: node.getTabStripHeight() + "px" };
-    tabStrip = (
-        <div className={tabStripClasses} style={tabStripStyle}
-            data-layout-path={path + "/tabstrip"}
-            onMouseDown={onMouseDown}
-            onContextMenu={onContextMenu}
-            onClick={onAuxMouseClick}
-            onAuxClick={onAuxMouseClick}
-            onTouchStart={onMouseDown}>
-            <div ref={tabbarInnerRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}>
-                <div
-                    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())}
+    if (node.isEnableTabWrap()) {
+        if (node.isEnableTabStrip()) {
+            tabStrip = (
+                <div className={tabStripClasses}
+                    style={{ flexWrap: "wrap", gap:"1px", marginTop:"2px" }}
+                    ref={tabStripRef}
+                    data-layout-path={path + "/tabstrip"}
+                    onPointerDown={onPointerDown}
+                    onDoubleClick={onDoubleClick}
+                    onContextMenu={onContextMenu}
+                    onClick={onAuxMouseClick}
+                    onAuxClick={onAuxMouseClick}
+                    draggable={true}
+                    onDragStart={onDragStart}
                 >
                     {tabs}
+                    <div style={{ flexGrow: 1 }} />
+                    {buttonbar}
                 </div>
-            </div>
-            {toolbar}
-        </div>
-    );
-
-    style = layout.styleFont(style);
+            );
+        }
+    } else {
+        if (node.isEnableTabStrip()) {
+            tabStrip = (
+                <div className={tabStripClasses}
+                    ref={tabStripRef}
+                    data-layout-path={path + "/tabstrip"}
+                    onPointerDown={onPointerDown}
+                    onDoubleClick={onDoubleClick}
+                    onContextMenu={onContextMenu}
+                    onClick={onAuxMouseClick}
+                    onAuxClick={onAuxMouseClick}
+                    draggable={true}
+                    onWheel={onMouseWheel}
+                    onDragStart={onDragStart}
+                >
+                    <div ref={tabStripInnerRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}>
+                        <div
+                            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}
+                        </div>
+                    </div>
+                    {buttonbar}
+                </div>
+            );
+        }
+    }
 
-    var placeHolder: React.ReactNode = undefined;
+    var emptyTabset: React.ReactNode;
     if (node.getChildren().length === 0) {
         const placeHolderCallback = layout.getTabSetPlaceHolderCallback();
         if (placeHolderCallback) {
-            placeHolder = placeHolderCallback(node);
+            emptyTabset = placeHolderCallback(node);
         }
     }
 
-    const center = <div className={cm(CLASSES.FLEXLAYOUT__TABSET_CONTENT)}>
-        {placeHolder}
+    let content = <div ref={contentRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_CONTENT)}>
+        {emptyTabset}
     </div>
 
-    var content;
     if (node.getTabLocation() === "top") {
-        content = <>{header}{tabStrip}{center}</>;
+        content = <>{tabStrip}{content}</>;
     } else {
-        content = <>{header}{center}{tabStrip}</>;
+        content = <>{content}{tabStrip}</>;
+    }
+
+    let style: Record<string, any> = {
+        flexGrow: Math.max(1, node.getWeight() * 1000),
+        minWidth: node.getMinWidth(),
+        minHeight: node.getMinHeight(),
+        maxWidth: node.getMaxWidth(),
+        maxHeight: node.getMaxHeight()
+    };
+
+    if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined && !node.isMaximized()) {
+        style.display = "none";
     }
 
-    return (
+    // note: tabset container is needed to allow flexbox to size without border/padding/margin
+    // then inner tabset can have border/padding/margin for styling
+    const tabset = (
         <div ref={selfRef}
-            dir="ltr"
-            data-layout-path={path}
+            className={cm(CLASSES.FLEXLAYOUT__TABSET_CONTAINER)}
             style={style}
-            className={cm(CLASSES.FLEXLAYOUT__TABSET)}
-            onWheel={onMouseWheel}>
-            {content}
+        >
+            <div className={cm(CLASSES.FLEXLAYOUT__TABSET)}
+                data-layout-path={path}
+            >
+                {content}
+            </div>
         </div>
     );
+
+    if (node.isMaximized()) {
+        if (layout.getMainElement()) {
+            return createPortal(
+                <div style={{
+                    position: "absolute",
+                    display: "flex",
+                    top: 0, left: 0, bottom: 0, right: 0
+                }}>
+                    {tabset}
+                </div>, layout.getMainElement()!);
+        } else {
+            return tabset;
+        }
+    } else {
+        return tabset;
+    }
+
 };