flexlayout-react 0.6.9 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.6.9",
+    "version": "0.7.1",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",
@@ -36,35 +36,33 @@
     "repository": "https://github.com/caplin/FlexLayout",
     "license": "ISC",
     "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
     },
     "eslintConfig": {
         "extends": "react-app"
     },
     "devDependencies": {
-        "@cypress/react": "^5.10.3",
-        "@cypress/webpack-dev-server": "^1.7.0",
-        "@types/node": "^16.11.12",
-        "@types/react": "^17.0.37",
-        "@types/react-dom": "^17.0.11",
+        "@types/react": "^18.0.5",
+        "@types/react-dom": "^18.0.1",
+        "@cypress/react": "^5.12.4",
+        "@cypress/webpack-dev-server": "^1.8.4",
+        "@types/node": "^17.0.24",
         "@types/uuid": "^8.3.3",
-        "css-loader": "^6.5.1",
-        "cypress": "^9.1.1",
+        "css-loader": "^6.7.1",
+        "cypress": "^9.5.4",
         "html-webpack-plugin": "^5.5.0",
-        "prettier": "^2.5.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "5.0.0",
-        "sass": "^1.45.0",
+        "prettier": "^2.6.2",
+        "react-scripts": "5.0.1",
+        "sass": "^1.50.0",
         "source-map-loader": "^3.0.0",
         "style-loader": "^3.3.1",
-        "ts-loader": "~9.2.6",
-        "typedoc": "^0.22.10",
-        "typescript": "^4.5.4",
-        "webpack": "^5.65.0",
+        "ts-loader": "~9.2.8",
+        "typedoc": "^0.22.15",
+        "typescript": "^4.6.3",
+        "webpack": "^5.72.0",
         "webpack-cli": "^4.9.1",
-        "webpack-dev-server": "^4.6.0"
+        "webpack-dev-server": "^4.8.1"
     },
     "dependencies": {
         "uuid": "^8.3.2"

package/src/PopupMenu.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { DragDrop } from "./DragDrop";
 import { TabNode } from "./model/TabNode";
 import { CLASSES } from "./Types";
-import { ILayoutCallbacks } from "./view/Layout";
+import { IconFactory, ILayoutCallbacks, TitleFactory } from "./view/Layout";
 import { TabButtonStamp } from "./view/TabButtonStamp";
 
 /** @internal */
@@ -11,8 +11,8 @@ export function showPopup(
     items: { index: number; node: TabNode }[],
     onSelect: (item: { index: number; node: TabNode }) => void,
     layout: ILayoutCallbacks,
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined,
+    iconFactory?: IconFactory,
+    titleFactory?: TitleFactory,
 ) {
     const layoutDiv = layout.getRootDiv();
     const classNameMapper = layout.getClassName;
@@ -77,8 +77,8 @@ interface IPopupMenuProps {
     onSelect: (item: { index: number; node: TabNode }) => void;
     classNameMapper: (defaultClassName: string) => string;
     layout: ILayoutCallbacks;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
 }
 
 /** @internal */

package/src/view/BorderButton.tsx

@@ -3,7 +3,7 @@ import { I18nLabel } from "../I18nLabel";
 import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { Rect } from "../Rect";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IconFactory, IIcons, ILayoutCallbacks, TitleFactory } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
 import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
@@ -14,8 +14,8 @@ export interface IBorderButtonProps {
     node: TabNode;
     selected: boolean;
     border: string;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons: IIcons;
     path: string;
 }

package/src/view/BorderTabSet.tsx

@@ -3,7 +3,7 @@ import { DockLocation } from "../DockLocation";
 import { BorderNode } from "../model/BorderNode";
 import { TabNode } from "../model/TabNode";
 import { BorderButton } from "./BorderButton";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
 import { showPopup } from "../PopupMenu";
 import { Actions } from "../model/Actions";
 import { I18nLabel } from "../I18nLabel";
@@ -16,8 +16,8 @@ import { isAuxMouseEvent } from "./Utils";
 export interface IBorderTabSetProps {
     border: BorderNode;
     layout: ILayoutCallbacks;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: (node: TabNode) => (React.ReactNode | undefined);
+    titleFactory?: (node: TabNode) => (ITitleObject | React.ReactNode | undefined);
     icons: IIcons;
     path: string;
 }
@@ -97,9 +97,11 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                 icons={icons}
             />
         );
-        tabs.push(
-            <div key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER)}></div>
-        );
+        if (i < border.getChildren().length-1) {
+            tabs.push(
+                <div key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER)}></div>
+            );
+        }
 
     };
 
@@ -114,7 +116,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     // allow customization of tabset right/bottom buttons
     let buttons: any[] = [];
-    const renderState = { headerContent: {}, buttons, stickyButtons: [], headerButtons: [] };
+    const renderState = { headerContent: undefined, buttons, stickyButtons: [], headerButtons: [] };
     layout.customizeTabSet(border, renderState);
     buttons = renderState.buttons;
 

package/src/view/ErrorBoundary.tsx

@@ -5,6 +5,7 @@ import { CLASSES } from "../Types";
 /** @internal */
 export interface IErrorBoundaryProps {
     message: string;
+    children: React.ReactNode;
 }
 /** @internal */
 export interface IErrorBoundaryState {

package/src/view/Icons.tsx

@@ -1,36 +1,46 @@
 import * as React from "react";
 
-const style = {width:"1em", height:"1em", display: "flex", alignItems:"center"};
+const style = { width: "1em", height: "1em", display: "flex", alignItems: "center" };
 
 export const CloseIcon = () => {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" >
-            <path fill="none" d="M0 0h24v24H0z"/>
-            <path  stroke="gray" fill="gray" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path stroke="gray" fill="gray" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
         </svg>
     );
 }
 
 export const MaximizeIcon = () => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none" /><path stroke="gray" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /></svg>
     );
 }
 
 export const OverflowIcon = () => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M7 10l5 5 5-5z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none" /><path stroke="gray" d="M7 10l5 5 5-5z" /></svg>
     );
 }
 
 export const PopoutIcon = () => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg"  style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>
+        // <svg xmlns="http://www.w3.org/2000/svg"  style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>
+        
+        // <svg xmlns="http://www.w3.org/2000/svg" style={style} fill="none" viewBox="0 0 24 24" stroke="gray" stroke-width="2">
+        //     <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        // </svg>
+
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 20 20" fill="gray">
+            <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+            <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+        </svg>
+
     );
 }
 
 export const RestoreIcon = () => {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none" /><path stroke="gray" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" /></svg>
     );
 }

package/src/view/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import { DockLocation } from "../DockLocation";
 import { DragDrop } from "../DragDrop";
 import { DropInfo } from "../DropInfo";
@@ -40,14 +40,16 @@ export type ShowOverflowMenuCallback = (
     onSelect: (item: { index: number; node: TabNode }) => void,
 ) => void;
 export type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
+export type IconFactory = (node: TabNode) => React.ReactNode;
+export type TitleFactory = (node: TabNode) => ITitleObject | React.ReactNode;
 
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
     font?: IFontValues;
     fontFamily?: string;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => ITitleObject | React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons?: IIcons;
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (
@@ -120,7 +122,7 @@ export interface ILayoutState {
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
     showHiddenBorder: DockLocation;
-    portal?: React.ReactNode;
+    portal?: React.ReactPortal;
 }
 
 export interface IIcons {
@@ -724,6 +726,15 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.dragStart(undefined, dragText, TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);
     }
 
+    /**
+     * Move a tab/tabset using drag and drop
+     * @param node the tab or tabset to drag
+     * @param dragText the text to show on the drag panel
+     */
+    moveTabWithDragAndDrop( node:  (TabNode | TabSetNode), dragText?: string) {
+        this.dragStart(undefined, dragText, node, true, undefined, undefined);
+    }
+
     /**
      * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you
      * mouse down on the panel
@@ -742,7 +753,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.dragDiv = this.currentDocument!.createElement("div");
         this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
         this.dragDiv.addEventListener("mousedown", this.onDragDivMouseDown);
-        this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown);
+        this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown, { passive: false });
 
         this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {
             if (this.dragDiv) {
@@ -883,7 +894,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
     /** @internal */
     showPortal = (control: React.ReactNode, element: HTMLElement) => {
-        const portal = ReactDOM.createPortal(control, element);
+        const portal = createPortal(control, element) as React.ReactPortal;
         this.setState({ portal });
     };
 

package/src/view/TabButton.tsx

@@ -4,7 +4,7 @@ import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
 import { Rect } from "../Rect";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IconFactory, IIcons, ILayoutCallbacks, TitleFactory } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
 import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
@@ -14,8 +14,8 @@ export interface ITabButtonProps {
     layout: ILayoutCallbacks;
     node: TabNode;
     selected: boolean;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons: IIcons;
     path: string;
 }

package/src/view/TabButtonStamp.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { TabNode } from "../model/TabNode";
-import { ILayoutCallbacks } from "./Layout";
+import { IconFactory, ILayoutCallbacks, TitleFactory } from "./Layout";
 import { CLASSES } from "../Types";
 import { getRenderStateEx } from "./Utils";
 
@@ -8,8 +8,8 @@ import { getRenderStateEx } from "./Utils";
 export interface ITabButtonStampProps {
     node: TabNode;
     layout: ILayoutCallbacks;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
 }
 
 /** @internal */

package/src/view/TabOverflowHook.tsx

@@ -33,7 +33,7 @@ export const useTabOverflow = (
 
     React.useEffect(() => {
         const instance = selfRef.current!;
-        instance.addEventListener('wheel', onWheel);
+        instance.addEventListener('wheel', onWheel, { passive: false });
         return () => {
             instance.removeEventListener('wheel', onWheel);
         }

package/src/view/TabSet.tsx

@@ -4,7 +4,7 @@ import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
 import { showPopup } from "../PopupMenu";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
 import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import { Orientation } from "../Orientation";
@@ -15,8 +15,8 @@ import { hideElement, isAuxMouseEvent } from "./Utils";
 export interface ITabSetProps {
     layout: ILayoutCallbacks;
     node: TabSetNode;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: (node: TabNode) => (React.ReactNode | undefined);
+    titleFactory?: (node: TabNode) => (ITitleObject | React.ReactNode | undefined);
     icons: IIcons;
     editingTab?: TabNode;
     path?: string;
@@ -146,9 +146,11 @@ export const TabSet = (props: ITabSetProps) => {
                     titleFactory={titleFactory}
                     icons={icons}
                 />);
-                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>
+                    );
+                }
         }
     }
 

package/src/view/Utils.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { TabNode } from "../model/TabNode";
-import { ILayoutCallbacks, ITitleObject } from "./Layout";
+import { IconFactory, ILayoutCallbacks, ITitleObject, TitleFactory } from "./Layout";
 
 /** @internal */
 export function getRenderStateEx(
     layout: ILayoutCallbacks,
     node: TabNode,
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined
+    iconFactory?: IconFactory,
+    titleFactory?: TitleFactory
 ) {
     let leadingContent = iconFactory ? iconFactory(node) : undefined;
     let titleContent: React.ReactNode = node.getName();

package/style/_base.scss

@@ -327,7 +327,7 @@
             &_sticky_buttons_container {
                 display: flex;
                 gap: 0.3em;
-                padding-left: 2px;
+                padding-left: 5px;
                 align-items: center;
             }
         }

package/style/dark.css

@@ -8,8 +8,8 @@
   --color-4: #333333;
   --color-5: #404040;
   --color-6: #4d4d4d;
-  --color-drag1: #cfe8ff;
-  --color-drag2: #b7d1b5;
+  --color-drag1: rgb(207, 232, 255);
+  --color-drag2: rgb(183, 209, 181);
   --color-drag1-background: rgba(128, 128, 128, 0.15);
   --color-drag2-background: rgba(128, 128, 128, 0.15);
   --font-size: medium;
@@ -307,7 +307,7 @@
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   gap: 0.3em;
-  padding-left: 2px;
+  padding-left: 5px;
   align-items: center;
 }
 .flexlayout__tab_floating {

package/style/gray.css

@@ -8,8 +8,8 @@
   --color-4: #cccccc;
   --color-5: #bfbfbf;
   --color-6: #b3b3b3;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
@@ -299,7 +299,7 @@
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   gap: 0.3em;
-  padding-left: 2px;
+  padding-left: 5px;
   align-items: center;
 }
 .flexlayout__tab_floating {

package/style/light.css

@@ -8,8 +8,8 @@
   --color-4: #e2e2e2;
   --color-5: #dbdbdb;
   --color-6: #d4d4d4;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
@@ -294,7 +294,7 @@
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   gap: 0.3em;
-  padding-left: 2px;
+  padding-left: 5px;
   align-items: center;
 }
 .flexlayout__tab_floating {

package/style/underline.css

@@ -8,8 +8,8 @@
   --color-4: #e6e6e6;
   --color-5: #e0e0e0;
   --color-6: #d9d9d9;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
@@ -47,6 +47,7 @@
   --color-edge-marker: gray;
   --color-underline: rgb(65, 105, 225);
   --color-underline-hover: #aaa;
+  --underline_height: 3px;
 }
 
 .flexlayout__layout {
@@ -216,23 +217,25 @@
   box-sizing: border-box;
   padding: 3px 0.5em;
   cursor: pointer;
+  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
 }
 .flexlayout__tab_button--selected {
   background-color: var(--color-tab-selected-background);
   color: var(--color-tab-selected);
-  border-bottom: 3px solid var(--color-underline);
+  border-bottom: var(--underline_height) solid var(--color-underline);
 }
 @media (hover: hover) {
   .flexlayout__tab_button:hover {
     background-color: var(--color-tab-selected-background);
     color: var(--color-tab-selected);
-    border-bottom: 3px solid var(--color-underline-hover);
+    border-bottom: var(--underline_height) solid var(--color-underline-hover);
   }
 }
 .flexlayout__tab_button--unselected {
   background-color: var(--color-tab-unselected-background);
   color: var(--color-tab-unselected);
   color: gray;
+  border-bottom: var(--underline_height) solid transparent;
 }
 .flexlayout__tab_button_leading {
   display: flex;
@@ -301,7 +304,7 @@
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   gap: 0.3em;
-  padding-left: 2px;
+  padding-left: 5px;
   align-items: center;
 }
 .flexlayout__tab_floating {
@@ -397,22 +400,24 @@
   margin: 2px 0px;
   box-sizing: border-box;
   white-space: nowrap;
+  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
 }
 .flexlayout__border_button--selected {
   background-color: var(--color-border-tab-selected-background);
   color: var(--color-border-tab-selected);
-  border-bottom: 3px solid var(--color-underline);
+  border-bottom: var(--underline_height) solid var(--color-underline);
 }
 @media (hover: hover) {
   .flexlayout__border_button:hover {
     background-color: var(--color-border-tab-selected-background);
     color: var(--color-border-tab-selected);
-    border-bottom: 3px solid var(--color-underline-hover);
+    border-bottom: var(--underline_height) solid var(--color-underline-hover);
   }
 }
 .flexlayout__border_button--unselected {
   background-color: var(--color-border-tab-unselected-background);
   color: var(--color-border-tab-unselected);
+  border-bottom: var(--underline_height) solid transparent;
 }
 .flexlayout__border_button_leading {
   display: flex;

package/style/underline.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;;;ACrEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EDuDR;EACA;EACA;;ACrDI;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EDzGZ;;AC4GQ;EACI;IACI;IACA;IDvGhB;;;AC4GQ;EACI;EACA;EDlHZ;;AC8HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDjJZ;;ACyJQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDzLhB;;;AC2MQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDxQR;EACA;EACA;;AC0QI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EDtTZ;;ACyTQ;EACI;IACI;IACA;IDrThB;;;AC0TQ;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDjWZ;;ACyWQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID1YhB;;;ACkZY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;AD3cR;EACI","file":"underline.css"}
+{"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;;;ACtEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;ED4DR;EACA;EACA;;AC1DI;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;EDtGR;;ACyGQ;EACI;EACA;EDvGZ;;AC0GQ;EACI;IACI;IACA;IDpGhB;;;ACyGQ;EACI;EACA;EDhHZ;EACA;;AC2HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ED9IZ;;ACsJQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDtLhB;;;ACwMQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDnQR;EACA;EACA;;ACqQI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDjTR;;ACoTQ;EACI;EACA;EDlTZ;;ACqTQ;EACI;IACI;IACA;IDhThB;;;ACqTQ;EACI;EACA;ED3TZ;;AC+TQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ED9VZ;;ACsWQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDvYhB;;;AC+YY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;ADtcR;EACI","file":"underline.css"}

package/style/underline.scss

@@ -77,6 +77,7 @@ $font-family: Roboto, Arial, sans-serif !default;
 
         --color-underline: rgb(65, 105, 225);
         --color-underline-hover: #aaa;
+        --underline_height: 3px;
     }
 }
 
@@ -102,18 +103,20 @@ $font-family: Roboto, Arial, sans-serif !default;
 }
 
 @mixin tab_button_mixin {
+    padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
 }
 
 @mixin tab_button_selected_mixin {
-    border-bottom: 3px solid  var(--color-underline);
+    border-bottom: var(--underline_height) solid  var(--color-underline);
 }
 
 @mixin tab_button_unselected_mixin {
     color: gray;
+    border-bottom: var(--underline_height) solid transparent;
 }
 
 @mixin tab_button_hovered_mixin {
-    border-bottom: 3px solid  var(--color-underline-hover);
+    border-bottom: var(--underline_height) solid  var(--color-underline-hover);
 }
 
 @mixin close_button_hovered_mixin {
@@ -128,17 +131,19 @@ $font-family: Roboto, Arial, sans-serif !default;
 }
 
 @mixin border_button_mixin {
+    padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
 }
 
 @mixin border_button_selected_mixin {
-    border-bottom: 3px solid  var(--color-underline);
+    border-bottom: var(--underline_height) solid  var(--color-underline);
 }
 
 @mixin border_button_unselected_mixin {
-}
+    border-bottom: var(--underline_height) solid transparent;
+    }
 
 @mixin border_button_hovered_mixin {
-    border-bottom: 3px solid  var(--color-underline-hover);
+    border-bottom: var(--underline_height) solid  var(--color-underline-hover);
 }
 
 @mixin splitter_mixin {