flexlayout-react 0.8.4 → 0.8.5

package/src/view/BorderTabSet.tsx

@@ -25,6 +25,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     const { border, layout, size } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
+    const miniScrollRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
     const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null);
     const tabStripInnerRef = React.useRef<HTMLDivElement | null>(null);
@@ -34,11 +35,11 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     React.useLayoutEffect(() => {
         border.setTabHeaderRect(Rect.getBoundingClientRect(selfRef.current!).relativeTo(layout.getDomRect()!));
     });
-    
-    const { selfRef, userControlledPositionRef, onScroll, hiddenTabs, onMouseWheel, isTabOverflow } = 
-        useTabOverflow(layout, border, Orientation.flip(border.getOrientation()), tabStripInnerRef,
+
+    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } =
+        useTabOverflow(layout, border, Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef,
             layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_BUTTON)
-    );
+        );
 
     const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (isAuxMouseEvent(event)) {
@@ -56,13 +57,15 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const callback = layout.getShowOverflowMenu();
-        const items = hiddenTabs.map(h=> {return {index: h, node: (border.getChildren()[h] as TabNode)};});
+        const items = hiddenTabs.map(h => { return { index: h, node: (border.getChildren()[h] as TabNode) }; });
         if (callback !== undefined) {
 
             callback(border, event, items, onOverflowItemSelect);
         } else {
             const element = overflowbuttonRef.current!;
-            showPopup(element,
+            showPopup(
+                element,
+                border,
                 items,
                 onOverflowItemSelect,
                 layout);
@@ -72,7 +75,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
         layout.doAction(Actions.selectTab(item.node.getId()));
-        userControlledPositionRef.current = false; 
+        userControlledPositionRef.current = false;
     };
 
     const onPopoutTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
@@ -149,7 +152,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
         let overflowContent;
         if (typeof icons.more === "function") {
-            const items = hiddenTabs.map(h=> {return {index: h, node: (border.getChildren()[h] as TabNode)};});
+            const items = hiddenTabs.map(h => { return { index: h, node: (border.getChildren()[h] as TabNode) }; });
 
             overflowContent = icons.more(border, items);
         } else {
@@ -200,17 +203,25 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     let outerStyle = {};
     const borderHeight = size - 1;
     if (border.getLocation() === DockLocation.LEFT) {
-        innerStyle = { right: "100%", top:0 };
-        outerStyle = { width: borderHeight, overflowY: "auto"};
+        innerStyle = { right: "100%", top: 0 };
+        outerStyle = { width: borderHeight, overflowY: "auto" };
     } else if (border.getLocation() === DockLocation.RIGHT) {
-        innerStyle = { left: "100%", top:0};
+        innerStyle = { left: "100%", top: 0 };
         outerStyle = { width: borderHeight, overflowY: "auto" };
     } else {
-        innerStyle = {left:0 };
+        innerStyle = { left: 0 };
         outerStyle = { height: borderHeight, overflowX: "auto" };
     }
-    const miniScrollbarClasses = cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR) + (border.isEnableTabScrollbar()?"":" " + cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_HIDDEN));
-    
+
+    let miniScrollbar = undefined;
+    if (border.isEnableTabScrollbar()) {
+        miniScrollbar = (
+            <div ref={miniScrollRef}
+                className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR)}
+                onPointerDown={onScrollPointerDown}
+            />
+        );
+    }
 
     return (
         <div
@@ -226,21 +237,24 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             onContextMenu={onContextMenu}
             onWheel={onMouseWheel}
         >
-            <div
-                ref={tabStripInnerRef}
-                className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) + " " + miniScrollbarClasses}
-                style={outerStyle}
-                onScroll={onScroll}  
-                >
+            <div className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER)}>
                 <div
-                    style={innerStyle}
-                    className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}
+                    ref={tabStripInnerRef}
+                    className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}
+                    style={outerStyle}
+                    onScroll={onScroll}
                 >
-                    {tabButtons}
+                    <div
+                        style={innerStyle}
+                        className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}
+                    >
+                        {tabButtons}
+                    </div>
                 </div>
+                {miniScrollbar}
             </div>
             {toolbar}
-        </div>
+        </div >
     );
 
 };

package/src/view/Layout.tsx

@@ -1224,7 +1224,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     // *************************** End Drag Drop *************************************
 }
 
-export const FlexLayoutVersion = "0.8.4";
+export const FlexLayoutVersion = "0.8.5";
 
 export type DragRectRenderCallback = (
     content: React.ReactNode | undefined,

package/src/view/PopupMenu.tsx

@@ -3,10 +3,13 @@ import { TabNode } from "../model/TabNode";
 import { CLASSES } from "../Types";
 import { LayoutInternal } from "./Layout";
 import { TabButtonStamp } from "./TabButtonStamp";
+import { TabSetNode } from "../model/TabSetNode";
+import { BorderNode } from "../model/BorderNode";
 
 /** @internal */
 export function showPopup(
     triggerElement: Element,
+    parentNode: TabSetNode | BorderNode,
     items: { index: number; node: TabNode }[],
     onSelect: (item: { index: number; node: TabNode }) => void,
     layout: LayoutInternal,
@@ -60,6 +63,7 @@ export function showPopup(
 
     layout.showControlInPortal(<PopupMenu
         currentDocument={currentDocument}
+        parentNode={parentNode}
         onSelect={onSelect}
         onHide={onHide}
         items={items}
@@ -70,6 +74,7 @@ export function showPopup(
 
 /** @internal */
 interface IPopupMenuProps {
+    parentNode: TabSetNode | BorderNode;
     items: { index: number; node: TabNode }[];
     currentDocument: Document;
     onHide: () => void;
@@ -80,7 +85,7 @@ interface IPopupMenuProps {
 
 /** @internal */
 const PopupMenu = (props: IPopupMenuProps) => {
-    const { items, onHide, onSelect, classNameMapper, layout} = props;
+    const { parentNode, items, onHide, onSelect, classNameMapper, layout } = props;
 
     const onItemClick = (item: { index: number; node: TabNode }, event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         onSelect(item);
@@ -88,38 +93,45 @@ const PopupMenu = (props: IPopupMenuProps) => {
         event.stopPropagation();
     };
 
-    const onDragStart = (event: React.DragEvent<HTMLElement>, node:TabNode) => {
+    const onDragStart = (event: React.DragEvent<HTMLElement>, node: TabNode) => {
         event.stopPropagation(); // prevent starting a tabset drag as well
         layout.setDragNode(event.nativeEvent, node as TabNode);
         setTimeout(() => {
             onHide();
         }, 0);
-       
+
     };
 
     const onDragEnd = (event: React.DragEvent<HTMLElement>) => {
         layout.clearDragMain();
     };
 
-    const itemElements = items.map((item, i) => (
-        <div key={item.index}
-            className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM)}
-            data-layout-path={"/popup-menu/tb" + i}
-            onClick={(event) => onItemClick(item, event)}
-            draggable={true}
-            onDragStart={(e) => onDragStart(e, item.node)}
-            onDragEnd={onDragEnd}
-            title={item.node.getHelpText()} >
-            <TabButtonStamp 
-                node={item.node}
-                layout={layout}
-            />
-        </div>
-    ));
+    const itemElements = items.map((item, i) => {
+        let classes = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM);
+        if (parentNode.getSelected() === item.index) {
+            classes += " " + classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED);
+        }
+        return (
+            <div key={item.index}
+                className={classes}
+                data-layout-path={"/popup-menu/tb" + i}
+                onClick={(event) => onItemClick(item, event)}
+                draggable={true}
+                onDragStart={(e) => onDragStart(e, item.node)}
+                onDragEnd={onDragEnd}
+                title={item.node.getHelpText()} >
+                <TabButtonStamp
+                    node={item.node}
+                    layout={layout}
+                />
+            </div>
+        )
+    }
+    );
 
     return (
         <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}
-        data-layout-path="/popup-menu"
+            data-layout-path="/popup-menu"
         >
             {itemElements}
         </div>);

package/src/view/TabOverflowHook.tsx

@@ -4,6 +4,7 @@ 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 = (
@@ -11,6 +12,7 @@ export const useTabOverflow = (
     node: TabSetNode | BorderNode,
     orientation: Orientation,
     tabStripRef: React.RefObject<HTMLElement | null>,
+    miniScrollRef: React.RefObject<HTMLElement | null>,
     tabClassName: string
 ) => {
     const [hiddenTabs, setHiddenTabs] = React.useState<number[]>([]);
@@ -20,8 +22,16 @@ export const useTabOverflow = (
     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.useEffect(() => {
         userControlledPositionRef.current = false;
@@ -37,9 +47,47 @@ export const useTabOverflow = (
             }
         }
 
-        updateHiddenTabs();  
+        updateHiddenTabs();
+        updateScrollMetrics();
     });
 
+    const updateScrollMetrics = () => {
+        if (tabStripRef.current && miniScrollRef.current) {
+            const t = tabStripRef.current;
+            const s = miniScrollRef.current;
+
+            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 updateHiddenTabs = () => {
         if (updateHiddenTabsTimerRef.current === undefined) {
             // throttle updates to prevent Maximum update depth exceeded error
@@ -71,11 +119,55 @@ export const useTabOverflow = (
     }
 
     const onScroll = () => {
+        userControlledPositionRef.current = true;
         updateTabRects();
+        updateScrollMetrics()
         updateHiddenTabs();
-        userControlledPositionRef.current = true;
     };
 
+    const onScrollPointerDown = (event: React.PointerEvent<HTMLElement>) => {
+        event.stopPropagation();
+        miniScrollRef.current!.setPointerCapture(event.pointerId)
+        const r = miniScrollRef.current?.getBoundingClientRect()!;
+        if (orientation === Orientation.HORZ) {
+            thumbInternalPos.current = event.clientX - r.x;
+        } else {
+            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 r = t.getBoundingClientRect()!;
+            let thumb = 0;
+            if (orientation === Orientation.HORZ) {
+                thumb = x - r.x - thumbInternalPos.current;
+            } else {
+                thumb = y - r.y - thumbInternalPos.current
+            }
+
+            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) {
@@ -132,24 +224,23 @@ export const useTabOverflow = (
     const onMouseWheel = (event: React.WheelEvent<HTMLElement>) => {
         if (tabStripRef.current) {
             if (node.getChildren().length === 0) return;
+
             let delta = 0;
-            if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-                delta = -event.deltaX;
-            } else {
+            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();
             }
-            if (event.deltaMode === 1) {
-                // DOM_DELTA_LINE	0x01	The delta values are specified in lines.
-                delta *= 40;
-            }
-            const newPos = getScrollPosition() - delta;
-            const maxScroll = getScrollSize(tabStripRef.current) - getSize(tabStripRef.current);
-            const p = Math.max(0, Math.min(maxScroll, newPos));
-            userControlledPositionRef.current = true;
-            setScrollPosition(p);
-            updateTabRects();
-            updateHiddenTabs();
-            event.stopPropagation();
         }
     };
 
@@ -195,15 +286,15 @@ export const useTabOverflow = (
         }
     }
 
-    const getScrollPosition = () => {
+    const getScrollPosition = (elm: Element) => {
         if (orientation === Orientation.HORZ) {
-            return tabStripRef.current!.scrollLeft;
+            return elm.scrollLeft;
         } else {
-            return tabStripRef.current!.scrollTop;
+            return elm.scrollTop;
         }
     }
 
-    return { selfRef, userControlledPositionRef, onScroll, hiddenTabs, onMouseWheel, isTabOverflow };
+    return { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow };
 };
 
 function arraysEqual(arr1: number[], arr2: number[]) {

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,26 +44,27 @@ export const TabSet = (props: ITabSetProps) => {
         const newContentRect = Rect.getContentRect(contentRef.current!).relativeTo(layout.getDomRect()!);
         if (!node.getContentRect().equals(newContentRect)) {
             node.setContentRect(newContentRect);
-            setTimeout(()=> { //prevent Maximum update depth exceeded error
+            setTimeout(() => { //prevent Maximum update depth exceeded error
                 layout.redrawInternal("tabset content rect " + newContentRect);
-            },0);
+            }, 0);
         }
     });
 
     // this must be after the useEffect, so the node rect is already set (else window popin will not position tabs correctly)
-    const { selfRef, userControlledPositionRef, onScroll, hiddenTabs, onMouseWheel, isTabOverflow } = 
-        useTabOverflow(layout, node, Orientation.HORZ, tabStripInnerRef, 
+    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)};});
+        const items = hiddenTabs.map(h => { return { index: h, node: (node.getChildren()[h] as TabNode) }; });
         if (callback !== undefined) {
             callback(node, event, items, onOverflowItemSelect);
         } else {
             const element = overflowbuttonRef.current!;
             showPopup(
                 element,
+                node,
                 items,
                 onOverflowItemSelect,
                 layout
@@ -200,11 +202,11 @@ 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") {
-                const items = hiddenTabs.map(h=> {return {index: h, node: (node.getChildren()[h] as TabNode)};});
+                const items = hiddenTabs.map(h => { return { index: h, node: (node.getChildren()[h] as TabNode) }; });
                 overflowContent = icons.more(node, items);
             } else {
                 overflowContent = (<>
@@ -229,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(
@@ -291,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>
@@ -335,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}
@@ -354,7 +356,15 @@ export const TabSet = (props: ITabSetProps) => {
         }
     } else {
         if (node.isEnableTabStrip()) {
-            const miniScrollbarClasses = cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR) + (node.isEnableTabScrollbar()?"":" " + cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_HIDDEN));
+            let miniScrollbar = undefined;
+            if (node.isEnableTabScrollbar()) {
+                miniScrollbar = (
+                    <div ref={miniScrollRef}
+                        className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR)}
+                        onPointerDown={onScrollPointerDown}
+                    />
+                );
+            }
             tabStrip = (
                 <div className={tabStripClasses}
                     ref={tabStripRef}
@@ -368,16 +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()) + " " + miniScrollbarClasses}
-                        style={{overflowX: 'auto', overflowY:"hidden"}}
-                        onScroll={onScroll}                        >
-                        <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())}
+                    <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>

package/style/_base.scss

@@ -234,7 +234,11 @@
                 box-sizing: border-box;
                 display: flex;
                 flex-grow: 1;
-                overflow: hidden;
+                scrollbar-width: none; // firefox
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
 
                 &_tab_container {
                     position: relative;
@@ -537,8 +541,12 @@
             box-sizing: border-box;
             align-items: center;
             display: flex;
-            overflow: hidden;
             flex-grow: 1;
+            scrollbar-width: none; // firefox
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
 
             &_tab_container {
                 white-space: nowrap;
@@ -667,7 +675,7 @@
                     color: var(--color-overflow);
                     font-size: inherit;
                     background-color: transparent;
-                    width:2em;
+                    width:1.5em;
                 }
 
                 &_overflow_top,
@@ -690,6 +698,12 @@
             white-space: nowrap;
             cursor: pointer;
             border-radius: 2px;
+
+            &--selected {
+                font-weight: 500;
+                background-color: var(--color-tab-selected-background);
+                color: var(--color-tab-selected);
+            }
         }
 
         @media (hover: hover) {
@@ -760,24 +774,35 @@
         font-family: var(--font-family);
     }
 
-    &__mini_scrollbar::-webkit-scrollbar {
-        width: 3px; 
-        height: 3px;
+    &__mini_scrollbar {
+        position: absolute;
+        background-color:var(--color-mini-scroll-indicator);
+        border-radius:5px;
+        width:var(--size-mini-scroll-indicator);
+        height:var(--size-mini-scroll-indicator);
+        visibility: hidden; 
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
     }
 
-    &__mini_scrollbar_hidden::-webkit-scrollbar {
-        display: none;
-    }
-    
-    &__mini_scrollbar::-webkit-scrollbar-button {
-        display: none;
-    }
-    
-    &__mini_scrollbar::-webkit-scrollbar-thumb {
-        background: #aaa; 
-        border-radius: 10px;
+    &__mini_scrollbar:hover {
+        background-color: var(--color-mini-scroll-indicator-hovered);
+        transition: background-color 0.3s ease-in-out;
     }
 
+    &__mini_scrollbar_container {
+        position: relative;
+        display: flex;
+        flex-grow: 1;
+        overflow: hidden;
+        
+        @media (hover: hover) {
+            &:hover .flexlayout__mini_scrollbar {
+                opacity: 1; 
+                visibility: visible;
+            }
+        }
+    }
 }