flexlayout-react 0.8.8 → 0.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.8.8",
+    "version": "0.8.10",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",
@@ -30,7 +30,7 @@
         "build:umd": "webpack --mode=development --config webpack_build.config.js",
         "build:umd:min": "webpack --mode=production --config webpack_build_min.config.js",
         "build:demo": "webpack",
-        "lint:eslint": "eslint src/*",
+        "lint": "eslint src/*",
         "doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
         "css": "sass style/rounded.scss  style/rounded.css && sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/light.scss test/style/light.css && sass style/dark.scss style/dark.css  && sass style/combined.scss style/combined.css"
     },
@@ -47,6 +47,7 @@
     "devDependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@eslint/js": "^9.24.0",
         "@mui/material": "^6.4.4",
         "@mui/x-data-grid": "^7.26.0",
         "@types/node": "^22.13.4",
@@ -57,6 +58,9 @@
         "ag-grid-react": "^33.1.0",
         "chart.js": "^4.4.7",
         "css-loader": "^7.1.2",
+        "eslint": "^9.24.0",
+        "eslint-plugin-react": "^7.37.5",
+        "globals": "^16.0.0",
         "html-webpack-plugin": "^5.6.3",
         "ol": "^10.4.0",
         "prettier": "^3.5.1",
@@ -72,6 +76,7 @@
         "ts-loader": "~9.5.2",
         "typedoc": "^0.27.7",
         "typescript": "^5.7.3",
+        "typescript-eslint": "^8.29.1",
         "webpack": "^5.98.0",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.0"

package/src/AttributeDefinitions.ts

@@ -62,7 +62,7 @@ export class AttributeDefinitions {
 
     update(jsonObj: any, obj: any) {
         for (const attr of this.attributes) {
-            if (jsonObj.hasOwnProperty(attr.name)) {
+            if (Object.prototype.hasOwnProperty.call(jsonObj, attr.name)) {
                 const fromValue = jsonObj[attr.name];
                 if (fromValue === undefined) {
                     delete obj[attr.name];
@@ -113,7 +113,7 @@ export class AttributeDefinitions {
                 type = attr.type;
             }
 
-            let defValue = JSON.stringify(defaultValue);
+            const defValue = JSON.stringify(defaultValue);
 
             const required = attr.required ? "" : "?";
 

package/src/Rect.ts

@@ -34,7 +34,7 @@ export class Rect {
     }
 
     static getBoundingClientRect(element: Element) {
-        let { x, y, width, height } = element.getBoundingClientRect();
+        const { x, y, width, height } = element.getBoundingClientRect();
         return new Rect(x, y, width, height);
     }
 

package/src/model/TabNode.ts

@@ -174,6 +174,10 @@ export class TabNode extends Node implements IDraggable {
         return this.getAttr("maxHeight") as number;
     }
 
+    isVisible() {
+        return this.visible;
+    }
+
     toJson(): IJsonTabNode {
         const json = {};
         TabNode.attributeDefinitions.toJson(json, this.attributes);
@@ -215,8 +219,8 @@ export class TabNode extends Node implements IDraggable {
     /** @internal */
     setVisible(visible: boolean) {
         if (visible !== this.visible) {
-            this.fireEvent("visibility", { visible });
             this.visible = visible;
+            this.fireEvent("visibility", { visible });
         }
     }
 

package/src/view/BorderButton.tsx

@@ -86,8 +86,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
     const onClose = (event: React.MouseEvent<HTMLElement>) => {
         if (isClosable()) {
             layout.doAction(Actions.deleteTab(node.getId()));
-        } else {
-            onClick();
+            event.stopPropagation();
         }
     };
 
@@ -110,7 +109,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
         if (event.code === 'Escape') {
             // esc
             layout.setEditingTab(undefined);
-        } else if (event.code === 'Enter') {
+        } else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
             // enter
             layout.setEditingTab(undefined);
             layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value));

package/src/view/Layout.tsx

@@ -197,7 +197,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     private findBorderBarSizeRef: React.RefObject<HTMLDivElement | null>;
     private mainRef: React.RefObject<HTMLDivElement | null>;
     private previousModel?: Model;
-    private orderedIds: string[];
+    private orderedTabIds: string[];
+    private orderedTabMoveableIds: string[];
     private moveableElementMap = new Map<string, HTMLElement>();
     private dropInfo: DropInfo | undefined;
     private outlineDiv?: HTMLElement;
@@ -222,7 +223,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     constructor(props: ILayoutInternalProps) {
         super(props);
 
-        this.orderedIds = [];
+        this.orderedTabIds = [];
+        this.orderedTabMoveableIds = [];
         this.selfRef = React.createRef<HTMLDivElement>();
         this.moveablesRef = React.createRef<HTMLDivElement>();
         this.mainRef = React.createRef<HTMLDivElement>();
@@ -356,17 +358,18 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
         const outer = this.renderBorders(inner);
 
         const tabs = this.renderTabs();
-        const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);
+        const reorderedTabs = this.reorderComponents(tabs, this.orderedTabIds);
 
         let floatingWindows = null;
-        let tabMoveables = null;
+        let reorderedTabMoveables = null;
         let tabStamps = null;
         let metricElements = null;
 
         if (this.isMainWindow) {
             floatingWindows = this.renderWindows();
             metricElements = this.renderMetricsElements();
-            tabMoveables = this.renderTabMoveables();
+            const tabMoveables = this.renderTabMoveables();
+            reorderedTabMoveables = this.reorderComponents(tabMoveables, this.orderedTabMoveableIds);
             tabStamps = <div key="__tabStamps__" className={this.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS)}>
                 {this.renderTabStamps()}
             </div>;
@@ -386,7 +389,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
                 <Overlay key="__overlay__" layout={this} show={this.state.showOverlay} />
                 {outer}
                 {reorderedTabs}
-                {tabMoveables}
+                {reorderedTabMoveables}
                 {tabStamps}
                 {this.state.portal}
                 {floatingWindows}
@@ -553,7 +556,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     }
 
     renderTabMoveables() {
-        const tabMoveables: React.ReactNode[] = [];
+        // const tabMoveables: React.ReactNode[] = [];
+        const tabMoveables = new Map<string, React.ReactNode>();
 
         this.props.model.visitNodes((node) => {
             if (node instanceof TabNode) {
@@ -570,7 +574,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
                 if (renderTab) {
                     //  console.log("rendertab", child.getName(), this.props.renderRevision);
                     const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : "");
-                    tabMoveables.push(createPortal(
+                    tabMoveables.set(node.getId(), createPortal(
                         <SizeTracker rect={rect} selected={child.isSelected()} forceRevision={this.state.forceRevision} tabsRevision={this.props.renderRevision} key={key}>
                             <ErrorBoundary message={this.i18nName(I18nLabel.Error_rendering_component)}>
                                 {this.props.factory(child)}
@@ -1228,7 +1232,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     // *************************** End Drag Drop *************************************
 }
 
-export const FlexLayoutVersion = "0.8.8";
+export const FlexLayoutVersion = "0.8.10";
 
 export type DragRectRenderCallback = (
     content: React.ReactNode | undefined,

package/src/view/TabButton.tsx

@@ -93,8 +93,7 @@ export const TabButton = (props: ITabButtonProps) => {
     const onClose = (event: React.MouseEvent<HTMLElement>) => {
         if (isClosable()) {
             layout.doAction(Actions.deleteTab(node.getId()));
-        } else {
-            onClick();
+            event.stopPropagation();
         }
     };
 
@@ -110,7 +109,7 @@ export const TabButton = (props: ITabButtonProps) => {
         if (event.code === 'Escape') {
             // esc
             layout.setEditingTab(undefined);
-        } else if (event.code === 'Enter') {
+        } else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
             // enter
             layout.setEditingTab(undefined);
             layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value));

package/src/view/TabOverflowHook.tsx

@@ -28,12 +28,12 @@ export const useTabOverflow = (
     const repositioningRef = React.useRef<boolean>(false);
     hiddenTabsRef.current = hiddenTabs;
 
-    // if node changes (new model) then reset scroll to 0
+    // if node id changes (new model) then reset scroll to 0
     React.useLayoutEffect(() => {
         if (tabStripRef.current) {
             setScrollPosition(0);
         }
-    }, [node]);
+    }, [node.getId()]);
 
     // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
     React.useLayoutEffect(() => {