@aptre/flex-layout 0.5.3 → 0.5.5

package/dist/index.mjs

@@ -5934,7 +5934,7 @@ var DragState = class {
 
 // src/view/OptimizedLayout.tsx
 import * as React20 from "react";
-import { useCallback, useEffect as useEffect6, useState as useState4 } from "react";
+import { memo as memo2, useCallback, useEffect as useEffect6, useMemo, useState as useState4 } from "react";
 function createTabInfo(node) {
   const parent = node.getParent();
   const contentRect = parent?.getContentRect() ?? Rect.empty();
@@ -5946,6 +5946,7 @@ function createTabInfo(node) {
 }
 function TabRef({
   node,
+  selected,
   onTabMount,
   onRectChange,
   onVisibilityChange
@@ -5967,14 +5968,52 @@ function TabRef({
         onRectChange(node.getId(), contentRect);
       }
     }
-    onVisibilityChange(node.getId(), node.isSelected());
     return () => {
       node.removeEventListener("resize");
       node.removeEventListener("visibility");
+      node.setVisible(false);
     };
   }, [node, onTabMount, onRectChange, onVisibilityChange]);
+  useEffect6(() => {
+    node.setVisible(selected);
+  }, [node, selected]);
   return null;
 }
+var TabPanel = memo2(function TabPanel2({
+  nodeId,
+  node,
+  rect,
+  visible,
+  isDragging,
+  contentClassName,
+  className,
+  renderTab,
+  onPointerDown
+}) {
+  const hasValidDimensions = rect.width > 0 && rect.height > 0;
+  const content = useMemo(() => renderTab(node), [renderTab, node]);
+  return /* @__PURE__ */ React20.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      "data-tab-id": nodeId,
+      className: className + (contentClassName ? " " + contentClassName : ""),
+      style: {
+        position: "absolute",
+        display: visible ? "flex" : "none",
+        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"
+      },
+      onPointerDown
+    },
+    content
+  );
+});
 function TabContainer({
   tabs,
   renderTab,
@@ -5982,12 +6021,7 @@ function TabContainer({
   classNameMapper,
   model
 }) {
-  const getClassName = useCallback(
-    (defaultClassName) => {
-      return classNameMapper ? classNameMapper(defaultClassName) : defaultClassName;
-    },
-    [classNameMapper]
-  );
+  const className = classNameMapper ? classNameMapper("flexlayout__tab") : "flexlayout__tab";
   const handlePointerDown = useCallback(
     (node) => {
       const parent = node.getParent();
@@ -6016,33 +6050,21 @@ function TabContainer({
       },
       "data-layout-path": "/tab-container"
     },
-    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",
-        {
-          key: nodeId,
-          role: "tabpanel",
-          "data-tab-id": nodeId,
-          className: getClassName("flexlayout__tab") + (contentClassName ? " " + contentClassName : ""),
-          style: {
-            position: "absolute",
-            display: visible ? "flex" : "none",
-            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"
-          },
-          onPointerDown: () => handlePointerDown(node)
-        },
-        renderTab(node)
-      );
-    })
+    Array.from(tabs.entries()).map(([nodeId, tabInfo]) => /* @__PURE__ */ React20.createElement(
+      TabPanel,
+      {
+        key: nodeId,
+        nodeId,
+        node: tabInfo.node,
+        rect: tabInfo.rect,
+        visible: tabInfo.visible,
+        isDragging,
+        contentClassName: tabInfo.node.getContentClassName(),
+        className,
+        renderTab,
+        onPointerDown: () => handlePointerDown(tabInfo.node)
+      }
+    ))
   );
 }
 function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, onModelChange: userOnModelChange, ...layoutProps }) {
@@ -6123,18 +6145,32 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
   );
   const handleModelChange = useCallback(
     (changedModel, action) => {
-      setTabs((prevTabs) => syncTabsWithModel(prevTabs));
+      setTabs((prevTabs) => {
+        const synced = syncTabsWithModel(prevTabs);
+        let hasVisibilityChange = false;
+        const updated = /* @__PURE__ */ new Map();
+        for (const [nodeId, tabInfo] of synced) {
+          const shouldBeVisible = tabInfo.node.isSelected();
+          if (tabInfo.visible !== shouldBeVisible) {
+            hasVisibilityChange = true;
+            updated.set(nodeId, { ...tabInfo, visible: shouldBeVisible });
+          } else {
+            updated.set(nodeId, tabInfo);
+          }
+        }
+        return hasVisibilityChange ? updated : synced;
+      });
       userOnModelChange?.(changedModel, action);
     },
     [syncTabsWithModel, userOnModelChange]
   );
   const factory = useCallback(
     (node) => {
-      return /* @__PURE__ */ React20.createElement(TabRef, { key: node.getId(), node, onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
+      return /* @__PURE__ */ React20.createElement(TabRef, { key: node.getId(), node, selected: node.isSelected(), onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
     },
     [handleTabMount, handleRectChange, handleVisibilityChange]
   );
-  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, model }));
+  return /* @__PURE__ */ React20.createElement("div", { className: "flexlayout__optimized_layout", style: { position: "absolute", inset: 0, overflow: "hidden" } }, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs, renderTab, isDragging, classNameMapper, model }));
 }
 
 // src/model/walk.ts

package/package.json

@@ -2,7 +2,7 @@
   "name": "@aptre/flex-layout",
   "author": "Caplin Systems Ltd",
   "description": "A multi-tab docking layout manager",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "license": "ISC",
   "repository": {
     "type": "git",