flexlayout-react 0.8.1 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.8.1",
+    "version": "0.8.3",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",
@@ -38,45 +38,43 @@
     "repository": "https://github.com/caplin/FlexLayout",
     "license": "ISC",
     "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
     },
     "eslintConfig": {
         "extends": "react-app"
     },
     "devDependencies": {
-        "@emotion/react": "^11.13.3",
-        "@emotion/styled": "^11.13.0",
-        "@fontsource/roboto": "^5.0.14",
-        "@mui/material": "^6.0.1",
-        "@types/node": "^22.5.0",
-        "@types/prismjs": "^1.26.4",
-        "@types/react": "^18.3.4",
-        "@types/react-dom": "^18.3.0",
-        "ag-grid-community": "^32.1.0",
-        "ag-grid-react": "^32.1.0",
-        "chart.js": "^4.4.4",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@fontsource/roboto": "^5.1.1",
+        "@mui/material": "^6.4.4",
+        "@mui/x-data-grid": "^7.26.0",
+        "@types/node": "^22.13.4",
+        "@types/prismjs": "^1.26.5",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
+        "ag-grid-community": "^33.1.0",
+        "ag-grid-react": "^33.1.0",
+        "chart.js": "^4.4.7",
         "css-loader": "^7.1.2",
-        "html-webpack-plugin": "^5.6.0",
-        "ol": "^10.1.0",
-        "prettier": "^3.3.3",
+        "html-webpack-plugin": "^5.6.3",
+        "ol": "^10.4.0",
+        "prettier": "^3.5.1",
         "prismjs": "^1.29.0",
-        "react": "^18.3.1",
-        "react-chartjs-2": "^5.2.0",
-        "react-dom": "^18.3.1",
+        "react": "^19.0.0",
+        "react-chartjs-2": "^5.3.0",
+        "react-dom": "^19.0.0",
         "react-scripts": "5.0.1",
-        "sass": "^1.77.8",
+        "sass": "^1.85.0",
         "source-map-loader": "^5.0.0",
         "style-loader": "^4.0.0",
-        "styled-components": "^6.1.13",
-        "ts-loader": "~9.5.1",
-        "typedoc": "^0.26.6",
-        "typescript": "^5.5.4",
-        "webpack": "^5.94.0",
-        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4",
-        "@mui/x-data-grid": "^7.15.0"
-    },
-    "dependencies": {
+        "styled-components": "^6.1.15",
+        "ts-loader": "~9.5.2",
+        "typedoc": "^0.27.7",
+        "typescript": "^5.7.3",
+        "webpack": "^5.98.0",
+        "webpack-cli": "^6.0.1",
+        "webpack-dev-server": "^5.2.0"
     }
 }

package/src/model/IJsonModel.ts

@@ -585,7 +585,7 @@ export interface ITabSetAttributes {
 	enableTabStrip?: boolean;
 
 	/**
-	  show tabs in location top or bottom
+	  wrap tabs onto multiple lines
 
 	  Default: inherited from Global attribute tabSetEnableTabWrap (default false)
 	 */

package/src/model/LayoutWindow.ts

@@ -4,7 +4,6 @@ import { Model } from "./Model";
 import { RowNode } from "./RowNode";
 import { Node } from "./Node";
 import { TabSetNode } from "./TabSetNode";
-import { keepOnScreen } from "../view/Utils";
 import { LayoutInternal } from "../view/Layout";
 
 export class LayoutWindow {
@@ -112,8 +111,7 @@ export class LayoutWindow {
     static fromJson(windowJson: IJsonPopout, model: Model, windowId: string): LayoutWindow {
         const count = model.getwindowsMap().size;
         let rect = windowJson.rect ? Rect.fromJson(windowJson.rect) : new Rect(50 + 50 * count, 50 + 50 * count, 600, 400);
-        rect = keepOnScreen(rect); // snaps to grid of 10x10 and then moves into visible area
-        // snapping prevents issue where window moves 1 pixel per save/restore on Chrome
+        rect.snap(10); // snapping prevents issue where window moves 1 pixel per save/restore on Chrome
         const layoutWindow = new LayoutWindow(windowId, rect);
         layoutWindow.root = RowNode.fromJson(windowJson.layout, model, layoutWindow);
         return layoutWindow;

package/src/model/Model.ts

@@ -16,7 +16,6 @@ import { TabNode } from "./TabNode";
 import { TabSetNode } from "./TabSetNode";
 import { randomUUID } from "./Utils";
 import { LayoutWindow } from "./LayoutWindow";
-import { isOnScreen } from "../view/Utils";
 
 /** @internal */
 export const DefaultMin = 0;
@@ -406,18 +405,10 @@ export class Model {
             model.borders = BorderSet.fromJson(json.borders, model);
         }
         if (json.popouts) {
-            let i= 0;
-            let top = 100;
-            let left = 100;
             for (const windowId in json.popouts) {
                 const windowJson = json.popouts[windowId];
                 const layoutWindow = LayoutWindow.fromJson(windowJson, model, windowId);
                 model.windows.set(windowId, layoutWindow);
-                // offscreen windows will reload cascaded (since cannot reposition)
-                if (!isOnScreen(layoutWindow.rect)) {
-                    layoutWindow.rect = new Rect(top + i*50, left+ i*50, 600, 400);
-                    i++;
-                }
             }
         }
 

package/src/model/TabSetNode.ts

@@ -560,7 +560,7 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
         );
 
         attributeDefinitions.addInherited("enableTabWrap", "tabSetEnableTabWrap").setDescription(
-            `show tabs in location top or bottom`
+            `wrap tabs onto multiple lines`
         );
         attributeDefinitions.addInherited("tabLocation", "tabSetTabLocation").setDescription(
             `the location of the tabs either top or bottom`

package/src/view/Layout.tsx

@@ -85,7 +85,7 @@ export interface ILayoutProps {
  */
 export class Layout extends React.Component<ILayoutProps> {
     /** @internal */
-    private selfRef: React.RefObject<LayoutInternal>;
+    private selfRef: React.RefObject<LayoutInternal | null>;
     /** @internal */
     private revision: number; // so LayoutInternal knows this is a parent render (used for optimization)
 
@@ -190,10 +190,10 @@ interface ILayoutInternalState {
 export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayoutInternalState> {
     public static dragState: DragState | undefined = undefined;
 
-    private selfRef: React.RefObject<HTMLDivElement>;
-    private moveablesRef: React.RefObject<HTMLDivElement>;
-    private findBorderBarSizeRef: React.RefObject<HTMLDivElement>;
-    private mainRef: React.RefObject<HTMLDivElement>;
+    private selfRef: React.RefObject<HTMLDivElement | null>;
+    private moveablesRef: React.RefObject<HTMLDivElement | null>;
+    private findBorderBarSizeRef: React.RefObject<HTMLDivElement | null>;
+    private mainRef: React.RefObject<HTMLDivElement | null>;
     private previousModel?: Model;
     private orderedIds: string[];
     private moveableElementMap = new Map<string, HTMLElement>();
@@ -406,7 +406,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
             const borderSetContentComponents = new Map<DockLocation, React.ReactNode>();
             for (const [_, location] of DockLocation.values) {
                 const border = borders.get(location);
-                const showBorder = border && (
+                const showBorder = border && border.isShowing() && (
                     !border.isAutoHide() ||
                     (border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location)));
                 if (showBorder) {
@@ -1033,7 +1033,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
 
 
     public setDragComponent(event: DragEvent, component: React.ReactNode, x: number, y: number) {
-        let dragElement: JSX.Element = (
+        let dragElement = (
             <div style={{ position: "unset" }}
                 className={this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT) + " " + this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT)}>
                 {component}

package/src/view/Tab.tsx

@@ -95,6 +95,12 @@ export const Tab = (props: ITabProps) => {
         }
     }
 
+    if (parentNode instanceof BorderNode) {
+        if (!parentNode.isShowing()) {
+            style.display = "none";
+        }
+    }
+
     let className = cm(CLASSES.FLEXLAYOUT__TAB);
     if (parentNode instanceof BorderNode) {
         className += " " + cm(CLASSES.FLEXLAYOUT__TAB_BORDER);

package/src/view/TabOverflowHook.tsx

@@ -154,6 +154,7 @@ export const useTabOverflow = (
     };
 
     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;

package/src/view/Utils.tsx

@@ -3,7 +3,6 @@ import { Node } from "../model/Node";
 import { TabNode } from "../model/TabNode";
 import { LayoutInternal } from "./Layout";
 import { TabSetNode } from "../model/TabSetNode";
-import { Rect } from "../Rect";
 
 /** @internal */
 export function isDesktop() {
@@ -112,29 +111,6 @@ export function canDockToWindow(node: Node) {
     return false;
 }
 
-export function keepOnScreen(rect: Rect) {
-    rect.snap(10);
-
-    const availableScreenWidth = window.screen.availWidth;
-    const availableScreenHeight = window.screen.availHeight;
-
-    if (rect.x + rect.width > availableScreenWidth || rect.y + rect.height > availableScreenHeight) {
-        // Adjust the rectangle to fit within the available screen space
-        rect.x = Math.max(0, Math.min(rect.x, availableScreenWidth - rect.width));
-        rect.y = Math.max(0, Math.min(rect.y, availableScreenHeight - rect.height));
-    }
-
-    return rect;
-}
-
-export function isOnScreen(rect: Rect) {
-    const availableScreenWidth = window.screen.availWidth;
-    const availableScreenHeight = window.screen.availHeight;
-
-    return (rect.x >= 0 && rect.getRight() <= availableScreenWidth &&
-        rect.y >= 0 || rect.getBottom() <= availableScreenHeight);
-}
-
 export function copyInlineStyles(source: HTMLElement, target: HTMLElement): boolean {
     // Get the inline style attribute from the source element
     const sourceStyle = source.getAttribute('style');