@aptre/flex-layout 0.4.2 → 0.4.4

package/dist/Layout.features.e2e.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/dist/index.mjs

@@ -4938,6 +4938,12 @@ var Tab = (props) => {
       }
     }
   }, [selected]);
+  React17.useLayoutEffect(() => {
+    node.setRect(rect);
+  }, [rect, node]);
+  React17.useLayoutEffect(() => {
+    node.setVisible(selected);
+  }, [selected, node]);
   const onPointerDown = () => {
     const parent = node.getParent();
     if (parent instanceof TabSetNode) {
@@ -4946,13 +4952,11 @@ var Tab = (props) => {
       }
     }
   };
-  node.setRect(rect);
   const cm = layout.getClassName;
   const style2 = {};
   rect.styleWithPosition(style2);
   let overlay = null;
   if (selected) {
-    node.setVisible(true);
     if (document.hidden && node.isEnablePopoutOverlay()) {
       const overlayStyle = {};
       rect.styleWithPosition(overlayStyle);
@@ -4960,7 +4964,6 @@ var Tab = (props) => {
     }
   } else {
     style2.display = "none";
-    node.setVisible(false);
   }
   if (parentNode instanceof TabSetNode) {
     if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== void 0) {
@@ -5897,9 +5900,24 @@ var DragState = class {
 
 // src/view/OptimizedLayout.tsx
 import * as React20 from "react";
-import { useCallback, useEffect as useEffect6, useMemo, useRef as useRef12, useState as useState4 } from "react";
-function TabRef({ node, onRectChange, onVisibilityChange }) {
+import { useCallback, useEffect as useEffect6, useState as useState4 } from "react";
+function createTabInfo(node) {
+  const parent = node.getParent();
+  const contentRect = parent?.getContentRect() ?? Rect.empty();
+  return {
+    node,
+    rect: contentRect,
+    visible: node.isSelected()
+  };
+}
+function TabRef({
+  node,
+  onTabMount,
+  onRectChange,
+  onVisibilityChange
+}) {
   useEffect6(() => {
+    onTabMount(node);
     const handleResize = (params) => {
       onRectChange(node.getId(), params.rect);
     };
@@ -5920,7 +5938,7 @@ function TabRef({ node, onRectChange, onVisibilityChange }) {
       node.removeEventListener("resize");
       node.removeEventListener("visibility");
     };
-  }, [node, onRectChange, onVisibilityChange]);
+  }, [node, onTabMount, onRectChange, onVisibilityChange]);
   return null;
 }
 function TabContainer({
@@ -5980,37 +5998,43 @@ function TabContainer({
     })
   );
 }
-function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, ...layoutProps }) {
+function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, onModelChange: userOnModelChange, ...layoutProps }) {
   const [isDragging, setIsDragging] = useState4(false);
   const [tabs, setTabs] = useState4(() => /* @__PURE__ */ new Map());
-  const tabNodesRef = useRef12(/* @__PURE__ */ new Map());
-  useEffect6(() => {
-    const newTabNodes = /* @__PURE__ */ new Map();
-    model.visitNodes((node) => {
-      if (node instanceof TabNode) {
-        newTabNodes.set(node.getId(), node);
-      }
-    });
-    tabNodesRef.current = newTabNodes;
-    setTabs((prevTabs) => {
+  const syncTabsWithModel = useCallback(
+    (prevTabs) => {
+      const modelTabNodes = /* @__PURE__ */ new Map();
+      model.visitNodes((node) => {
+        if (node instanceof TabNode) {
+          modelTabNodes.set(node.getId(), node);
+        }
+      });
       const nextTabs = /* @__PURE__ */ new Map();
-      for (const [nodeId, node] of newTabNodes) {
+      let changed = false;
+      for (const [nodeId, node] of modelTabNodes) {
         const existing = prevTabs.get(nodeId);
         if (existing) {
           nextTabs.set(nodeId, { ...existing, node });
         } else {
-          const parent = node.getParent();
-          const contentRect = parent?.getContentRect() ?? Rect.empty();
-          nextTabs.set(nodeId, {
-            node,
-            rect: contentRect,
-            visible: node.isSelected()
-          });
+          nextTabs.set(nodeId, createTabInfo(node));
+          changed = true;
+        }
+      }
+      for (const nodeId of prevTabs.keys()) {
+        if (!modelTabNodes.has(nodeId)) {
+          changed = true;
         }
       }
+      if (!changed && nextTabs.size === prevTabs.size) {
+        return prevTabs;
+      }
       return nextTabs;
-    });
-  }, [model]);
+    },
+    [model]
+  );
+  useEffect6(() => {
+    setTabs((prevTabs) => syncTabsWithModel(prevTabs));
+  }, [syncTabsWithModel]);
   const handleRectChange = useCallback((nodeId, rect) => {
     setTabs((prevTabs) => {
       const existing = prevTabs.get(nodeId);
@@ -6033,6 +6057,16 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
       return nextTabs;
     });
   }, []);
+  const handleTabMount = useCallback((node) => {
+    setTabs((prevTabs) => {
+      if (prevTabs.has(node.getId())) {
+        return prevTabs;
+      }
+      const nextTabs = new Map(prevTabs);
+      nextTabs.set(node.getId(), createTabInfo(node));
+      return nextTabs;
+    });
+  }, []);
   const handleDragStateChange = useCallback(
     (dragging) => {
       setIsDragging(dragging);
@@ -6040,14 +6074,20 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
     },
     [onDragStateChange]
   );
+  const handleModelChange = useCallback(
+    (changedModel, action) => {
+      setTabs((prevTabs) => syncTabsWithModel(prevTabs));
+      userOnModelChange?.(changedModel, action);
+    },
+    [syncTabsWithModel, userOnModelChange]
+  );
   const factory = useCallback(
     (node) => {
-      return /* @__PURE__ */ React20.createElement(TabRef, { key: node.getId(), node, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
+      return /* @__PURE__ */ React20.createElement(TabRef, { key: node.getId(), node, onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
     },
-    [handleRectChange, handleVisibilityChange]
+    [handleTabMount, handleRectChange, handleVisibilityChange]
   );
-  const tabsForContainer = useMemo(() => tabs, [tabs]);
-  return /* @__PURE__ */ React20.createElement("div", { style: { position: "relative", width: "100%", height: "100%" } }, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs: tabsForContainer, renderTab, isDragging, classNameMapper }));
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs, renderTab, isDragging, classNameMapper }));
 }
 
 // src/model/walk.ts

package/dist/view/OptimizedLayout.d.ts

@@ -26,4 +26,4 @@ export interface IOptimizedLayoutProps extends Omit<ILayoutProps, "factory"> {
  *
  * @see https://github.com/caplin/FlexLayout/issues/456
  */
-export declare function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, ...layoutProps }: IOptimizedLayoutProps): React.JSX.Element;
+export declare function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, onModelChange: userOnModelChange, ...layoutProps }: IOptimizedLayoutProps): React.JSX.Element;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@aptre/flex-layout",
   "author": "Caplin Systems Ltd",
   "description": "A multi-tab docking layout manager",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -68,8 +68,8 @@
     "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist/",
     "format": "prettier --write './style/*.scss' './{src,declarations}/**/(*.ts|*.tsx|*.html)' '*.json' '.vscode/*.json' '.github/**/*.json' '.prettierrc.yml' '.github/**/*.yml'",
     "typecheck": "tsgo --noEmit -p tsconfig.json",
-    "test": "npm run typecheck && npm run test:js && npm run test:browser",
-    "test:js": "vitest --config=vitest.config.ts --run",
+    "test": "npm run typecheck && npm run test:browser",
+    "test:js": "vitest --config=vitest.config.ts --run --passWithNoTests",
     "test:browser": "vitest --config=vitest.browser.config.ts --run",
     "test:browser:watch": "vitest --config=vitest.browser.config.ts",
     "test:browser:ui": "cross-env BROWSER_TEST_UI=1 vitest --config=vitest.browser.config.ts",
@@ -107,6 +107,7 @@
     "eslint-plugin-react": "^7.37.2",
     "globals": "^16.0.0",
     "happy-dom": "^20.0.11",
+    "jsdom": "^27.3.0",
     "playwright": "^1.57.0",
     "prettier": "^3.0.0",
     "prismjs": "^1.28.0",

package/dist/Layout.test.d.ts

@@ -1 +0,0 @@
-export {};