@aptre/flex-layout 0.4.0 → 0.4.2

package/dist/index.mjs

@@ -1671,7 +1671,15 @@ var TabSetNode = class _TabSetNode extends Node {
   }
   /** @internal */
   setContentRect(rect) {
+    const changed = !this.contentRect.equals(rect);
     this.contentRect = rect;
+    if (changed && rect.width > 0 && rect.height > 0) {
+      for (const child of this.children) {
+        if (child instanceof TabNode) {
+          child.setRect(rect);
+        }
+      }
+    }
   }
   /** @internal */
   getContentRect() {
@@ -3177,7 +3185,15 @@ var BorderNode = class _BorderNode extends Node {
   }
   /** @internal */
   setContentRect(r) {
+    const changed = !this.contentRect.equals(r);
     this.contentRect = r;
+    if (changed && r.width > 0 && r.height > 0) {
+      for (const child of this.children) {
+        if (child instanceof TabNode) {
+          child.setRect(r);
+        }
+      }
+    }
   }
   /** @internal */
   isEnableDrop() {
@@ -4499,9 +4515,12 @@ var TabSet = (props) => {
       node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));
     }
     const newContentRect = Rect.getContentRect(contentRef.current).relativeTo(layout.getDomRect());
-    if (!node.getContentRect().equals(newContentRect)) {
+    const oldContentRect = node.getContentRect();
+    if (!oldContentRect.equals(newContentRect)) {
       node.setContentRect(newContentRect);
-      if (!isFirstRender.current) {
+      const oldWasEmpty = oldContentRect.width === 0 && oldContentRect.height === 0;
+      const shouldRedraw = !isFirstRender.current || oldWasEmpty;
+      if (shouldRedraw) {
         layout.redrawInternal("tabset content rect " + newContentRect);
       }
     }
@@ -5922,11 +5941,13 @@ function TabContainer({
       style: {
         position: "absolute",
         inset: 0,
-        // CRITICAL: Disable pointer events during drag to prevent drag overlay from disappearing
-        // When tabs are rendered outside FlexLayout's DOM, dragging over them triggers dragleave
-        // on the Layout element, causing dragEnterCount to drop to 0 and clearing the drag UI.
-        pointerEvents: isDragging ? "none" : "auto",
-        // Ensure tab container doesn't block FlexLayout's tab bar interactions when not dragging
+        // CRITICAL: The container itself always has pointer-events: none
+        // so it doesn't block clicks on elements beneath it (like FlexLayout's tab bar).
+        // Individual tab panels have pointer-events: auto to receive clicks.
+        // During drag, we also disable pointer events on the children to prevent
+        // dragleave events on the Layout element.
+        pointerEvents: "none",
+        // Ensure tab container doesn't block FlexLayout's tab bar interactions
         zIndex: 0
       },
       "data-layout-path": "/tab-container"
@@ -5934,6 +5955,7 @@ function TabContainer({
     Array.from(tabs.entries()).map(([nodeId, tabInfo]) => {
       const { node, rect, visible } = tabInfo;
       const contentClassName = node.getContentClassName();
+      const hasValidDimensions = rect.width > 0 && rect.height > 0;
       return /* @__PURE__ */ React20.createElement(
         "div",
         {
@@ -5944,11 +5966,13 @@ function TabContainer({
           style: {
             position: "absolute",
             display: visible ? "flex" : "none",
-            left: rect.x,
-            top: rect.y,
-            width: rect.width,
-            height: rect.height,
-            overflow: "auto"
+            left: hasValidDimensions ? rect.x : 0,
+            top: hasValidDimensions ? rect.y : 0,
+            width: hasValidDimensions ? rect.width : "100%",
+            height: hasValidDimensions ? rect.height : "100%",
+            overflow: "auto",
+            // Tab panels receive pointer events when visible and not dragging
+            pointerEvents: visible && !isDragging ? "auto" : "none"
           }
         },
         renderTab(node)

package/dist/test/setup.d.ts

@@ -1,8 +1 @@
-declare const localStorageMock: {
-    getItem: (key: string) => string;
-    setItem: (key: string, value: string) => void;
-    removeItem: (key: string) => void;
-    clear: () => void;
-    readonly length: number;
-    key: (index: number) => string;
-};
+import "../../style/light.css";

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.0",
+  "version": "0.4.2",
   "license": "ISC",
   "repository": {
     "type": "git",