flexlayout-react 0.8.18 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexlayout-react",
-  "version": "0.8.18",
+  "version": "0.9.0",
   "description": "A multi-tab docking layout manager",
   "author": "Caplin Systems Ltd",
   "repository": {
@@ -44,7 +44,7 @@
     "docking layout"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "preview": "vite preview",
     "build": "npm run build:clean && npm run build:demo && npm run css && npm run build:lib && npm run build:types && npm run doc",
     "build:clean": "rimraf demo/dist dist/ types/ typedoc/",
@@ -53,49 +53,46 @@
     "build:lib": "vite build --config vite.config.lib.ts",
     "test": "vitest",
     "playwright": "playwright test --ui",
-    "lint": "eslint src/*",
+    "lint": "eslint src",
     "doc": "typedoc --out typedoc --exclude \"**/demo/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
     "css": "sass style:style"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@eslint/js": "^9.24.0",
-    "@mui/material": "^7.0.2",
-    "@mui/x-data-grid": "^7.28.3",
-    "@playwright/test": "^1.51.1",
-    "@types/node": "^22.14.1",
-    "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.0",
-    "ag-grid-community": "^33.2.3",
-    "ag-grid-react": "^33.2.3",
-    "chart.js": "^4.4.9",
-    "eslint": "^9.24.0",
+    "@emotion/styled": "^11.14.1",
+    "@eslint/js": "^10.0.1",
+    "@mui/material": "^9.0.0",
+    "@mui/x-data-grid": "^9.0.1",
+    "@playwright/test": "^1.59.1",
+    "@types/node": "^25.5.2",
+    "@types/prismjs": "^1.26.6",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "ag-grid-community": "^35.2.1",
+    "ag-grid-react": "^35.2.1",
+    "chart.js": "^4.5.1",
+    "eslint": "^10.2.0",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^16.0.0",
-    "ol": "^10.5.0",
-    "prettier": "^3.5.3",
+    "globals": "^17.4.0",
+    "ol": "^10.8.0",
+    "prettier": "^3.8.1",
     "prismjs": "^1.30.0",
-    "react": "^19.1.0",
-    "react-chartjs-2": "^5.3.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.5",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.5",
     "react-scripts": "5.0.1",
-    "rimraf": "^6.0.1",
-    "sass": "^1.86.3",
-    "styled-components": "^6.1.17",
-    "typedoc": "^0.28.2",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.0",
-    "vitest": "^3.1.1"
+    "rimraf": "^6.1.3",
+    "sass": "^1.99.0",
+    "styled-components": "^6.4.0",
+    "typedoc": "^0.28.18",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.1",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4"
   }
 }

package/style/_base.scss

@@ -14,6 +14,7 @@
 }
 
 @mixin baseMixin {
+
     /*
         base classes
     */
@@ -21,6 +22,7 @@
         &__layout {
             @include absoluteFill;
             display: flex;
+            overflow: hidden;
             background-color: var(--color-background);
 
             &_overlay {
@@ -34,7 +36,7 @@
                 z-index: 100;
                 display: flex;
                 flex-direction: column;
-                align-items: start;
+                align-items: flex-start;
             }
 
             &_moveables {
@@ -69,6 +71,41 @@
             background-color: var(--color-splitter);
             touch-action: none;
             z-index: 10;
+            position: relative;
+
+            &_horz {
+                width: var(--splitter-size);
+                min-width: var(--splitter-size);
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    /* Center the hit area over the thin line */
+                    left: 50%;
+                    width: var(--splitter-active-size);
+                    transform: translateX(-50%);
+                    z-index: 1;
+                }
+            }
+
+            &_vert {
+                height: var(--splitter-size);
+                min-height: var(--splitter-size);
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                    /* Center the hit area over the thin line */
+                    top: 50%;
+                    height: var(--splitter-active-size);
+                    transform: translateY(-50%);
+                    z-index: 1;
+                }
+            }
 
             @media (hover: hover) {
                 &:hover {
@@ -79,8 +116,7 @@
                 }
             }
 
-            &_border {
-            }
+            &_border {}
 
             &_drag {
                 position: absolute;
@@ -93,8 +129,9 @@
             }
 
             &_handle {
-                background-color: #ccc;
+                background-color: var(--color-splitter-handle);
                 border-radius: 3px;
+                visibility: var(--splitter-handle-visibility);
 
                 &_horz {
                     width: 3px;
@@ -196,23 +233,7 @@
             }
 
             &_leading {
-                display:flex;
-            }
-
-            &_header {
-                // tabset header bar
                 display: flex;
-                align-items: center;
-                padding: 3px 3px 3px 5px;
-                box-sizing: border-box;
-                border-bottom: 1px solid var(--color-tabset-divider-line);
-                color: var(--color-tabset-header);
-                background-color: var(--color-tabset-header-background);
-                font-size: var(--font-size);
-
-                &_content {
-                    flex-grow: 1;
-                }
             }
 
             &_tabbar {
@@ -222,7 +243,10 @@
                     background-color: var(--color-tabset-background);
                     overflow: hidden;
                     display: flex;
+                    align-items: center;
+                    min-height: 1.5em;
                     font-size: var(--font-size);
+                    font-weight: var(--font-weight);
                 }
 
                 &_outer_top {
@@ -254,6 +278,7 @@
                         padding-right: 4px;
                         box-sizing: border-box;
                         white-space: nowrap;
+                        align-items: center;
 
                         &_top {
                             border-top: 2px solid transparent;
@@ -309,12 +334,26 @@
                 background-color: #0000003d;
             }
 
+            &_layout_container {
+                // @include absoluteFill;
+                position:relative;
+                height: 100%;
+                box-sizing: border-box;
+            }
+
+            &_layout_container_user {
+                position:relative;
+                flex-grow: 1;
+                box-sizing: border-box;
+            }
+
             &_button {
                 display: flex;
                 gap: 0.3em;
                 align-items: center;
                 box-sizing: border-box;
-                padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
+                padding: 3px 0.5em;
+                font-weight: var(--font-weight);
 
                 cursor: pointer;
 
@@ -353,11 +392,9 @@
                     color: var(--color-tab-unselected);
                 }
 
-                &_top {
-                }
+                &_top {}
 
-                &_bottom {
-                }
+                &_bottom {}
 
                 &_leading {
                     display: flex;
@@ -372,6 +409,7 @@
                     border: none;
                     font-family: var(--font-family);
                     font-size: var(--font-size);
+                    font-weight: var(--font-weight);
                     color: var(--color-tab-textbox);
                     background-color: var(--color-tab-textbox-background);
                     border: 1px inset var(--color-1);
@@ -472,8 +510,9 @@
             box-sizing: border-box;
             overflow: hidden;
             display: flex;
-            font-size: var(--font-size);
             font-family: var(--font-family);
+            font-size: var(--font-size);
+            font-weight: var(--font-weight);
             color: var(--color-border);
             background-color: var(--color-border-background);
 
@@ -482,9 +521,9 @@
                 overflow: hidden;
                 background-color: var(--color-border-tab-content);
             }
-            
+
             &_leading {
-                display:flex;
+                display: flex;
             }
 
             &_top {
@@ -524,6 +563,7 @@
                 &_tab_container {
                     white-space: nowrap;
                     display: flex;
+                    align-items: center;
                     padding-left: 2px;
                     padding-right: 2px;
                     box-sizing: border-box;
@@ -555,6 +595,7 @@
                 margin: 2px 0px;
                 box-sizing: border-box;
                 white-space: nowrap;
+                font-weight: var(--font-weight);
 
                 &--selected {
                     background-color: var(--color-border-tab-selected-background);
@@ -586,8 +627,7 @@
                     border-radius: 4px;
                     visibility: hidden;
 
-                    &:hover {
-                    }
+                    &:hover {}
                 }
 
                 @media (pointer: coarse) {
@@ -661,6 +701,7 @@
         &__popup_menu {
             font-size: var(--font-size);
             font-family: var(--font-family);
+            font-weight: var(--font-weight);
 
             &_item {
                 padding: 2px 0.5em;
@@ -688,7 +729,7 @@
                 background: var(--color-popup-unselected-background);
                 border-radius: 3px;
                 position: absolute;
-                z-index: 1000;
+                z-index: 3000;
                 max-height: 50%;
                 min-width: 100px;
                 overflow: auto;
@@ -696,6 +737,40 @@
             }
         }
 
+        &__float_window {
+            box-sizing: border-box;
+            background-color: var(--color-tabset-background);
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            z-index: 2000;
+
+            &_header {
+                display: flex;
+                align-items: center;
+                padding: 2px 8px;
+                background-color: var(--color-float-window-header-background);
+                border-bottom: 1px solid var(--color-tabset-divider-line);
+                cursor: move;
+                user-select: none;
+                font-family: var(--font-family);
+                font-size: .8em;
+                min-height: 15px;
+            }
+
+            &_content {
+                position: relative;
+                flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+                min-height: 0;
+                min-width: 0;
+                margin: 5px;
+            }
+        }
+
         &__floating_window {
             _body {
                 height: 100%;
@@ -728,6 +803,7 @@
             padding-bottom: 5px;
             font-size: var(--font-size);
             font-family: var(--font-family);
+            font-weight: var(--font-weight);
         }
 
         &__mini_scrollbar {
@@ -761,6 +837,6 @@
         }
     }
 
-/* ======================== End of Base Classes =========================== */
+    /* ======================== End of Base Classes =========================== */
 
-}
+}