flexlayout-react 0.8.3 → 0.8.5

package/src/view/TabOverflowHook.tsx

@@ -1,174 +1,302 @@
 import * as React from "react";
-import { TabNode } from "../model/TabNode";
-import { Rect } from "../Rect";
 import { TabSetNode } from "../model/TabSetNode";
 import { BorderNode } from "../model/BorderNode";
 import { Orientation } from "../Orientation";
+import { LayoutInternal } from "./Layout";
+import { TabNode } from "../model/TabNode";
+import { startDrag } from "./Utils";
 
 /** @internal */
 export const useTabOverflow = (
+    layout: LayoutInternal,
     node: TabSetNode | BorderNode,
     orientation: Orientation,
-    toolbarRef: React.MutableRefObject<HTMLElement | null>,
-    stickyButtonsRef: React.MutableRefObject<HTMLElement | null>
+    tabStripRef: React.RefObject<HTMLElement | null>,
+    miniScrollRef: React.RefObject<HTMLElement | null>,
+    tabClassName: string
 ) => {
-    const firstRender = React.useRef<boolean>(true);
-    const tabsTruncated = React.useRef<boolean>(false);
-    const lastRect = React.useRef<Rect>(Rect.empty());
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
+    const [hiddenTabs, setHiddenTabs] = React.useState<number[]>([]);
+    const [isTabOverflow, setTabOverflow] = React.useState<boolean>(false);
 
-    const [position, setPosition] = React.useState<number>(0);
-    const userControlledLeft = React.useRef<boolean>(false);
-    const [hiddenTabs, setHiddenTabs] = React.useState<{ node: TabNode; index: number }[]>([]);
-    const lastHiddenCount = React.useRef<number>(0);
+    const selfRef = React.useRef<HTMLDivElement | null>(null);
+    const userControlledPositionRef = React.useRef<boolean>(false);
+    const updateHiddenTabsTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+    const hiddenTabsRef = React.useRef<number[]>([]);
+    const thumbInternalPos = React.useRef<number>(0);
+    hiddenTabsRef.current = hiddenTabs;
 
+    // if node changes (new model) then reset scroll to 0
+    React.useEffect(() => {
+        if (tabStripRef.current) {
+            setScrollPosition(0);
+        }
+    }, [node]);
+    
     // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
-    React.useLayoutEffect(() => {
-        userControlledLeft.current = false;
+    React.useEffect(() => {
+        userControlledPositionRef.current = false;
     }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
 
-    React.useLayoutEffect(() => {
-        const nodeRect = node instanceof TabSetNode ? node.getRect() : (node as BorderNode).getTabHeaderRect()!;
-        if (nodeRect.width > 0 && nodeRect.height > 0) {
-            updateVisibleTabs();
+    React.useEffect(() => {
+        checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons
+
+        if (!userControlledPositionRef.current) {
+            const selectedTab = findSelectedTab();
+            if (selectedTab) {
+                selectedTab.scrollIntoView();
+            }
         }
+
+        updateHiddenTabs();
+        updateScrollMetrics();
     });
 
-    const instance = toolbarRef.current;
-    React.useEffect(() => {
-        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) => {
-        event.preventDefault();
-    };
+    const updateScrollMetrics = () => {
+        if (tabStripRef.current && miniScrollRef.current) {
+            const t = tabStripRef.current;
+            const s = miniScrollRef.current;
 
-    const getNear = (rect: Rect) => {
-        if (orientation === Orientation.HORZ) {
-            return rect.x;
-        } else {
-            return rect.y;
+            const size = getSize(t);
+            const scrollSize = getScrollSize(t);
+            const position = getScrollPosition(t);
+
+            if (scrollSize > size && scrollSize > 0) {
+                let thumbSize = size * size / scrollSize;
+                let adjust = 0;
+                if (thumbSize < 20) {
+                    adjust = 20 - thumbSize;
+                    thumbSize = 20;
+                }
+                const thumbPos = position * (size - adjust) / scrollSize; 
+                if (orientation === Orientation.HORZ) {
+                    s.style.width = thumbSize + "px";
+                    s.style.left = thumbPos + "px";
+                } else {
+                    s.style.height = thumbSize + "px";
+                    s.style.top = thumbPos + "px";
+                }
+                s.style.display = "block";
+            } else {
+                s.style.display = "none";
+            }
+
+            if (orientation === Orientation.HORZ) {
+                s.style.bottom = "0px";
+            } else {
+                s.style.right = "0px";
+            }
         }
-    };
+    }
 
-    const getFar = (rect: Rect) => {
-        if (orientation === Orientation.HORZ) {
-            return rect.getRight();
-        } else {
-            return rect.getBottom();
+    const updateHiddenTabs = () => {
+        if (updateHiddenTabsTimerRef.current === undefined) {
+            // throttle updates to prevent Maximum update depth exceeded error
+            updateHiddenTabsTimerRef.current = setTimeout(() => {
+                const newHiddenTabs = findHiddenTabs();
+                if (!arraysEqual(newHiddenTabs, hiddenTabsRef.current)) {
+                    setHiddenTabs(newHiddenTabs);
+                }
+
+                updateHiddenTabsTimerRef.current = undefined;
+            }, 100);
         }
+    }
+
+    const updateTabRects = () => {
+        if (tabStripRef.current) {
+            const tabContainer = tabStripRef.current.firstElementChild!;
+
+            const nodeChildren = node.getChildren();
+            let i = 0;
+            Array.from(tabContainer.children).forEach((child) => {
+                if (child.classList.contains(tabClassName)) {
+                    const childNode = nodeChildren[i] as TabNode;
+                    childNode.setTabRect(layout.getBoundingClientRect(child as HTMLElement));
+                    i++;
+                }
+            });
+        }
+    }
+
+    const onScroll = () => {
+        userControlledPositionRef.current = true;
+        updateTabRects();
+        updateScrollMetrics()
+        updateHiddenTabs();
     };
 
-    const getSize = (rect: DOMRect | Rect) => {
+    const onScrollPointerDown = (event: React.PointerEvent<HTMLElement>) => {
+        event.stopPropagation();
+        miniScrollRef.current!.setPointerCapture(event.pointerId)
+        const r = miniScrollRef.current?.getBoundingClientRect()!;
         if (orientation === Orientation.HORZ) {
-            return rect.width;
+            thumbInternalPos.current = event.clientX - r.x;
         } else {
-            return rect.height;
+            thumbInternalPos.current = event.clientY - r.y;
         }
-    };
+        userControlledPositionRef.current = true;
+        startDrag(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);
+    }
+
+    const onDragMove = (x: number, y: number) => {
+        if (tabStripRef.current && miniScrollRef.current) {
+            const t = tabStripRef.current;
+            const s = miniScrollRef.current;
+            const size = getSize(t);
+            const scrollSize = getScrollSize(t);
+            const thumbSize = getSize(s);
 
-    const updateVisibleTabs = () => {
-        const tabMargin = 2;
-        if (firstRender.current === true) {
-            tabsTruncated.current = false;
-        }
-        const nodeRect = node instanceof TabSetNode ? node.getRect() : (node as BorderNode).getTabHeaderRect()!;
-        let lastChild = node.getChildren()[node.getChildren().length - 1] as TabNode;
-        const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current!.getBoundingClientRect());
-
-        if (
-            firstRender.current === true ||
-            (lastHiddenCount.current === 0 && hiddenTabs.length !== 0) ||
-            nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second
-            nodeRect.height !== lastRect.current.height
-        ) {
-            lastHiddenCount.current = hiddenTabs.length;
-            lastRect.current = nodeRect;
-            const enabled = node instanceof TabSetNode ? node.isEnableTabStrip() === true : true;
-            let endPos = getFar(nodeRect) - stickyButtonsSize;
-            if (toolbarRef.current !== null) {
-                endPos -= getSize(toolbarRef.current.getBoundingClientRect());
+            const r = t.getBoundingClientRect()!;
+            let thumb = 0;
+            if (orientation === Orientation.HORZ) {
+                thumb = x - r.x - thumbInternalPos.current;
+            } else {
+                thumb = y - r.y - thumbInternalPos.current
             }
-            if (enabled && node.getChildren().length > 0) {
-                if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()!) + tabMargin < endPos) {
-                    return; // nothing to do all tabs are shown in available space
-                }
 
-                let shiftPos = 0;
-
-                const selectedTab = node.getSelectedNode() as TabNode;
-                if (selectedTab && !userControlledLeft.current) {
-                    const selectedRect = selectedTab.getTabRect()!;
-                    const selectedStart = getNear(selectedRect) - tabMargin;
-                    const selectedEnd = getFar(selectedRect) + tabMargin;
-
-                    // when selected tab is larger than available space then align left
-                    if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {
-                        shiftPos = getNear(nodeRect) - selectedStart;
-                        // console.log("shiftPos1", shiftPos, getNear(nodeRect), selectedStart);
-                    } else {
-                        if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {
-                            if (selectedStart < getNear(nodeRect)) {
-                                shiftPos = getNear(nodeRect) - selectedStart;
-                                // console.log("shiftPos2", shiftPos, getNear(nodeRect), selectedStart);
-                            }
-                            // use second if statement to prevent tab moving back then forwards if not enough space for single tab
-                            if (selectedEnd + shiftPos > endPos) {
-                                shiftPos = endPos - selectedEnd;
-                            }
-                        }
-                    }
+            thumb = Math.max(0, Math.min(scrollSize - thumbSize, thumb));
+            if (size > 0) {
+                const scrollPos = thumb * scrollSize / size;
+                setScrollPosition(scrollPos);
+            }
+        }
+    }
+
+    const onDragEnd = () => {
+    }
+
+    const onDragCancel = () => {
+    }
+
+    const findSelectedTab: () => Element | undefined = () => {
+        let found: Element | undefined = undefined;
+        if (tabStripRef.current) {
+            const tabContainer = tabStripRef.current.firstElementChild!;
+
+            Array.from(tabContainer.children).forEach((child) => {
+                if (child.classList.contains(tabClassName + "--selected")) {
+                    found = child;
                 }
+            });
+        }
+        return found;
+    };
 
-                const extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()!) + tabMargin + shiftPos));
-                const newPosition = Math.min(0, position + shiftPos + extraSpace);
-                // console.log("newPosition", newPosition, position, shiftPos, extraSpace);
-
-                // find hidden tabs
-                const diff = newPosition - position;
-                const hidden: { node: TabNode; index: number }[] = [];
-                for (let i = 0; i < node.getChildren().length; i++) {
-                    const child = node.getChildren()[i] as TabNode;
-                    if (getNear(child.getTabRect()!) + diff < getNear(nodeRect!) || getFar(child.getTabRect()!) + diff > endPos) {
-                        hidden.push({ node: child, index: i });
+    const checkForOverflow = () => {
+        if (tabStripRef.current) {
+            const strip = tabStripRef.current;
+            const tabContainer = strip.firstElementChild!;
+
+            const offset = isTabOverflow ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting
+            const dock = (getSize(tabContainer) + offset) > getSize(tabStripRef.current);
+            if (dock !== isTabOverflow) {
+                setTabOverflow(dock);
+            }
+        }
+    }
+
+    const findHiddenTabs: () => number[] = () => {
+        const hidden: number[] = [];
+        if (tabStripRef.current) {
+            const strip = tabStripRef.current;
+            const stripRect = strip.getBoundingClientRect();
+            const visibleNear = getNear(stripRect) - 1;
+            const visibleFar = getFar(stripRect) + 1;
+
+            const tabContainer = strip.firstElementChild!;
+
+            let i = 0;
+            Array.from(tabContainer.children).forEach((child) => {
+                const tabRect = child.getBoundingClientRect();
+
+                if (child.classList.contains(tabClassName)) {
+                    if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) {
+                        hidden.push(i);
                     }
+                    i++;
                 }
+            });
+        }
 
-                tabsTruncated.current = hidden.length > 0;
+        return hidden;
+    };
+
+    const onMouseWheel = (event: React.WheelEvent<HTMLElement>) => {
+        if (tabStripRef.current) {
+            if (node.getChildren().length === 0) return;
 
-                firstRender.current = false; // need to do a second render
-                setHiddenTabs(hidden);
-                // console.log(newPosition);
-                setPosition(newPosition);
+            let delta = 0;
+            if (Math.abs(event.deltaY) > 0) {
+                delta = -event.deltaY;
+                if (event.deltaMode === 1) {
+                    // DOM_DELTA_LINE	0x01	The delta values are specified in lines.
+                    delta *= 40;
+                }
+                const newPos = getScrollPosition(tabStripRef.current) - delta;
+                const maxScroll = getScrollSize(tabStripRef.current) - getSize(tabStripRef.current);
+                const p = Math.max(0, Math.min(maxScroll, newPos));
+                setScrollPosition(p);
+                updateTabRects();
+                updateHiddenTabs();
+                userControlledPositionRef.current = true;
+                event.stopPropagation();
             }
-        } else {
-            firstRender.current = true;
         }
     };
 
-    const onMouseWheel = (event: React.WheelEvent<HTMLElement>) => {
-        if (node.getChildren().length===0) return;
-        let delta = 0;
-        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-            delta = -event.deltaX;
+    // orientation helpers:
+
+    const getNear = (rect: DOMRect) => {
+        if (orientation === Orientation.HORZ) {
+            return rect.x;
         } else {
-            delta = -event.deltaY;
+            return rect.y;
         }
-        if (event.deltaMode === 1) {
-            // DOM_DELTA_LINE	0x01	The delta values are specified in lines.
-            delta *= 40;
+    };
+
+    const getFar = (rect: DOMRect) => {
+        if (orientation === Orientation.HORZ) {
+            return rect.right;
+        } else {
+            return rect.bottom;
         }
-        setPosition(position + delta);
-        userControlledLeft.current = true;
-        event.stopPropagation();
     };
 
-    return { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated: tabsTruncated.current };
+    const getSize = (elm: Element) => {
+        if (orientation === Orientation.HORZ) {
+            return elm.clientWidth;
+        } else {
+            return elm.clientHeight;
+        }
+    }
+
+    const getScrollSize = (elm: Element) => {
+        if (orientation === Orientation.HORZ) {
+            return elm.scrollWidth;
+        } else {
+            return elm.scrollHeight;
+        }
+    }
+
+    const setScrollPosition = (p: number) => {
+        if (orientation === Orientation.HORZ) {
+            tabStripRef.current!.scrollLeft = p;
+        } else {
+            tabStripRef.current!.scrollTop = p;
+        }
+    }
+
+    const getScrollPosition = (elm: Element) => {
+        if (orientation === Orientation.HORZ) {
+            return elm.scrollLeft;
+        } else {
+            return elm.scrollTop;
+        }
+    }
+
+    return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow };
 };
+
+function arraysEqual(arr1: number[], arr2: number[]) {
+    return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]);
+}

package/src/view/TabSet.tsx

@@ -24,6 +24,7 @@ export const TabSet = (props: ITabSetProps) => {
     const { node, layout } = props;
 
     const tabStripRef = React.useRef<HTMLDivElement | null>(null);
+    const miniScrollRef = 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);
@@ -43,22 +44,28 @@ export const TabSet = (props: ITabSetProps) => {
         const newContentRect = Rect.getContentRect(contentRef.current!).relativeTo(layout.getDomRect()!);
         if (!node.getContentRect().equals(newContentRect)) {
             node.setContentRect(newContentRect);
-            layout.redrawInternal("tabset content rect " + newContentRect);
+            setTimeout(() => { //prevent Maximum update depth exceeded error
+                layout.redrawInternal("tabset content rect " + newContentRect);
+            }, 0);
         }
     });
 
     // 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 { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } =
+        useTabOverflow(layout, node, Orientation.HORZ, tabStripInnerRef, miniScrollRef,
+            layout.getClassName(CLASSES.FLEXLAYOUT__TAB_BUTTON));
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const callback = layout.getShowOverflowMenu();
+        const items = hiddenTabs.map(h => { return { index: h, node: (node.getChildren()[h] as TabNode) }; });
         if (callback !== undefined) {
-            callback(node, event, hiddenTabs, onOverflowItemSelect);
+            callback(node, event, items, onOverflowItemSelect);
         } else {
             const element = overflowbuttonRef.current!;
             showPopup(
                 element,
-                hiddenTabs,
+                node,
+                items,
                 onOverflowItemSelect,
                 layout
             );
@@ -68,7 +75,7 @@ export const TabSet = (props: ITabSetProps) => {
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
         layout.doAction(Actions.selectTab(item.node.getId()));
-        userControlledLeft.current = false;
+        userControlledPositionRef.current = false;
     };
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
@@ -86,12 +93,6 @@ export const TabSet = (props: ITabSetProps) => {
 
     const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {
         if (!isAuxMouseEvent(event)) {
-            let name = node.getName();
-            if (name === undefined) {
-                name = "";
-            } else {
-                name = ": " + name;
-            }
             layout.doAction(Actions.setActiveTabset(node.getId(), layout.getWindowId()));
         }
     };
@@ -144,12 +145,6 @@ export const TabSet = (props: ITabSetProps) => {
     // Start Render
 
     const cm = layout.getClassName;
-
-    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0
-    if (tabStripInnerRef.current !== null && tabStripInnerRef.current!.scrollLeft !== 0) {
-        tabStripInnerRef.current.scrollLeft = 0;
-    }
-
     const selectedTabNode: TabNode = node.getSelectedNode() as TabNode;
     const path = node.getPath();
 
@@ -191,7 +186,7 @@ export const TabSet = (props: ITabSetProps) => {
     }
 
     if (stickyButtons.length > 0) {
-        if (!node.isEnableTabWrap() && (tabsTruncated || isTabStretch)) {
+        if (!node.isEnableTabWrap() && (isTabOverflow || isTabStretch)) {
             buttons = [...stickyButtons, ...buttons];
         } else {
             tabs.push(<div
@@ -207,11 +202,12 @@ export const TabSet = (props: ITabSetProps) => {
     }
 
     if (!node.isEnableTabWrap()) {
-         if (hiddenTabs.length > 0) {
+        if (hiddenTabs.length > 0) {
             const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
             let overflowContent;
             if (typeof icons.more === "function") {
-                overflowContent = icons.more(node, hiddenTabs);
+                const items = hiddenTabs.map(h => { return { index: h, node: (node.getChildren()[h] as TabNode) }; });
+                overflowContent = icons.more(node, items);
             } else {
                 overflowContent = (<>
                     {icons.more}
@@ -235,10 +231,10 @@ export const TabSet = (props: ITabSetProps) => {
         }
     }
 
-    if (selectedTabNode !== undefined && 
-        layout.isSupportsPopout() && 
-        selectedTabNode.isEnablePopout() && 
-        selectedTabNode.isEnablePopoutIcon() ) {
+    if (selectedTabNode !== undefined &&
+        layout.isSupportsPopout() &&
+        selectedTabNode.isEnablePopout() &&
+        selectedTabNode.isEnablePopoutIcon()) {
 
         const popoutTitle = layout.i18nName(I18nLabel.Popout_Tab);
         buttons.push(
@@ -297,7 +293,7 @@ export const TabSet = (props: ITabSetProps) => {
                 key="active"
                 data-layout-path={path + "/button/active"}
                 title={title}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON) }
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_ICON)}
             >
                 {(typeof icons.activeTabset === "function") ? icons.activeTabset(node) : icons.activeTabset}
             </div>
@@ -341,7 +337,7 @@ export const TabSet = (props: ITabSetProps) => {
         if (node.isEnableTabStrip()) {
             tabStrip = (
                 <div className={tabStripClasses}
-                    style={{ flexWrap: "wrap", gap:"1px", marginTop:"2px" }}
+                    style={{ flexWrap: "wrap", gap: "1px", marginTop: "2px" }}
                     ref={tabStripRef}
                     data-layout-path={path + "/tabstrip"}
                     onPointerDown={onPointerDown}
@@ -360,6 +356,15 @@ export const TabSet = (props: ITabSetProps) => {
         }
     } else {
         if (node.isEnableTabStrip()) {
+            let miniScrollbar = undefined;
+            if (node.isEnableTabScrollbar()) {
+                miniScrollbar = (
+                    <div ref={miniScrollRef}
+                        className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR)}
+                        onPointerDown={onScrollPointerDown}
+                    />
+                );
+            }
             tabStrip = (
                 <div className={tabStripClasses}
                     ref={tabStripRef}
@@ -373,13 +378,20 @@ export const TabSet = (props: ITabSetProps) => {
                     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())}
+                    <div className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER)}>
+                        <div ref={tabStripInnerRef}
+                            className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}
+                            style={{ overflowX: 'auto', overflowY: "hidden" }}
+                            onScroll={onScroll}
                         >
-                            {tabs}
+                            <div
+                                style={{ width: (isTabStretch ? "100%" : "none") }}
+                                className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation())}
+                            >
+                                {tabs}
+                            </div>
                         </div>
+                        {miniScrollbar}
                     </div>
                     {buttonbar}
                 </div>