@aptre/flex-layout 0.5.4 → 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();
@@ -5979,6 +5979,41 @@ function TabRef({
   }, [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,
@@ -5986,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();
@@ -6020,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 }) {

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