@aptre/flex-layout 0.6.0 → 0.6.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/view/Layout.tsx
-import * as React18 from "react";
+import { Component as Component2, createRef } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { createRoot } from "react-dom/client";
 
@@ -2953,13 +2953,10 @@ var BorderNode = class _BorderNode extends Node {
 };
 
 // src/view/BorderTab.tsx
-import * as React3 from "react";
+import { useLayoutEffect, useRef as useRef2 } from "react";
 
 // src/view/Splitter.tsx
-import * as React2 from "react";
-
-// src/view/Utils.tsx
-import * as React from "react";
+import { useEffect, useRef, useState } from "react";
 
 // src/model/ICloseType.ts
 var ICloseType = /* @__PURE__ */ ((ICloseType2) => {
@@ -2970,6 +2967,7 @@ var ICloseType = /* @__PURE__ */ ((ICloseType2) => {
 })(ICloseType || {});
 
 // src/view/Utils.tsx
+import { jsx } from "react/jsx-runtime";
 function isDesktop() {
   const desktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
   return desktop;
@@ -2983,9 +2981,9 @@ function getRenderStateEx(layout, node, iconAngle) {
   }
   if (leadingContent === void 0 && node.getIcon() !== void 0) {
     if (iconAngle !== 0) {
-      leadingContent = /* @__PURE__ */ React.createElement("img", { style: { width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }, src: node.getIcon(), alt: "leadingContent" });
+      leadingContent = /* @__PURE__ */ jsx("img", { style: { width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }, src: node.getIcon(), alt: "leadingContent" });
     } else {
-      leadingContent = /* @__PURE__ */ React.createElement("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
+      leadingContent = /* @__PURE__ */ jsx("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
     }
   }
   const buttons = [];
@@ -3050,23 +3048,24 @@ function isTabClosable(node, selected) {
 }
 
 // src/view/Splitter.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Splitter = (props) => {
   const { layout, node, index, horizontal } = props;
-  const [dragging, setDragging] = React2.useState(false);
-  const selfRef = React2.useRef(null);
-  const extendedRef = React2.useRef(null);
-  const pBounds = React2.useRef([]);
-  const outlineDiv = React2.useRef(void 0);
-  const handleDiv = React2.useRef(void 0);
-  const dragStartX = React2.useRef(0);
-  const dragStartY = React2.useRef(0);
-  const initalSizes = React2.useRef({ initialSizes: [], sum: 0, startPosition: 0 });
+  const [dragging, setDragging] = useState(false);
+  const selfRef = useRef(null);
+  const extendedRef = useRef(null);
+  const pBounds = useRef([]);
+  const outlineDiv = useRef(void 0);
+  const handleDiv = useRef(void 0);
+  const dragStartX = useRef(0);
+  const dragStartY = useRef(0);
+  const initalSizes = useRef({ initialSizes: [], sum: 0, startPosition: 0 });
   const size = node.getModel().getSplitterSize();
   let extra = node.getModel().getSplitterExtra();
   if (!isDesktop()) {
     extra = Math.max(30, extra + size) - size;
   }
-  React2.useEffect(() => {
+  useEffect(() => {
     selfRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
     extendedRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
     return () => {
@@ -3200,10 +3199,10 @@ var Splitter = (props) => {
   }
   let handle;
   if (!dragging && node.getModel().isSplitterEnableHandle()) {
-    handle = /* @__PURE__ */ React2.createElement("div", { className: cm("flexlayout__splitter_handle" /* FLEXLAYOUT__SPLITTER_HANDLE */) + " " + (horizontal ? cm("flexlayout__splitter_handle_horz" /* FLEXLAYOUT__SPLITTER_HANDLE_HORZ */) : cm("flexlayout__splitter_handle_vert" /* FLEXLAYOUT__SPLITTER_HANDLE_VERT */)) });
+    handle = /* @__PURE__ */ jsx2("div", { className: cm("flexlayout__splitter_handle" /* FLEXLAYOUT__SPLITTER_HANDLE */) + " " + (horizontal ? cm("flexlayout__splitter_handle_horz" /* FLEXLAYOUT__SPLITTER_HANDLE_HORZ */) : cm("flexlayout__splitter_handle_vert" /* FLEXLAYOUT__SPLITTER_HANDLE_VERT */)) });
   }
   if (extra === 0) {
-    return /* @__PURE__ */ React2.createElement("div", { className, style: style2, ref: selfRef, "data-layout-path": node.getPath() + "/s" + (index - 1), onPointerDown }, handle);
+    return /* @__PURE__ */ jsx2("div", { className, style: style2, ref: selfRef, "data-layout-path": node.getPath() + "/s" + (index - 1), onPointerDown, children: handle });
   } else {
     const style22 = {};
     if (node.getOrientation() === Orientation.HORZ) {
@@ -3216,16 +3215,17 @@ var Splitter = (props) => {
       style22.cursor = "ns-resize";
     }
     const className2 = cm("flexlayout__splitter_extra" /* FLEXLAYOUT__SPLITTER_EXTRA */);
-    return /* @__PURE__ */ React2.createElement("div", { className, style: style2, ref: selfRef, "data-layout-path": node.getPath() + "/s" + (index - 1), onPointerDown }, /* @__PURE__ */ React2.createElement("div", { style: style22, ref: extendedRef, className: className2, onPointerDown }));
+    return /* @__PURE__ */ jsx2("div", { className, style: style2, ref: selfRef, "data-layout-path": node.getPath() + "/s" + (index - 1), onPointerDown, children: /* @__PURE__ */ jsx2("div", { style: style22, ref: extendedRef, className: className2, onPointerDown }) });
   }
 };
 
 // src/view/BorderTab.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function BorderTab(props) {
   const { layout, border, show } = props;
-  const selfRef = React3.useRef(null);
-  const isFirstRender = React3.useRef(true);
-  React3.useLayoutEffect(() => {
+  const selfRef = useRef2(null);
+  const isFirstRender = useRef2(true);
+  useLayoutEffect(() => {
     const outerRect = layout.getBoundingClientRect(selfRef.current);
     const contentRect = Rect.getContentRect(selfRef.current).relativeTo(layout.getDomRect());
     if (outerRect.width > 0) {
@@ -3254,21 +3254,28 @@ function BorderTab(props) {
   style2.display = show ? "flex" : "none";
   const className = layout.getClassName("flexlayout__border_tab_contents" /* FLEXLAYOUT__BORDER_TAB_CONTENTS */);
   if (border.getLocation() === DockLocation.LEFT || border.getLocation() === DockLocation.TOP) {
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { ref: selfRef, style: style2, className }), show && /* @__PURE__ */ React3.createElement(Splitter, { layout, node: border, index: 0, horizontal }));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx3("div", { ref: selfRef, style: style2, className }),
+      show && /* @__PURE__ */ jsx3(Splitter, { layout, node: border, index: 0, horizontal })
+    ] });
   } else {
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, show && /* @__PURE__ */ React3.createElement(Splitter, { layout, node: border, index: 0, horizontal }), /* @__PURE__ */ React3.createElement("div", { ref: selfRef, style: style2, className }));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      show && /* @__PURE__ */ jsx3(Splitter, { layout, node: border, index: 0, horizontal }),
+      /* @__PURE__ */ jsx3("div", { ref: selfRef, style: style2, className })
+    ] });
   }
 }
 
 // src/view/BorderTabSet.tsx
-import * as React8 from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef5 } from "react";
 
 // src/view/BorderButton.tsx
-import * as React4 from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var BorderButton = (props) => {
   const { layout, node, selected, border, icons, path } = props;
-  const selfRef = React4.useRef(null);
-  const contentRef = React4.useRef(null);
+  const selfRef = useRef3(null);
+  const contentRef = useRef3(null);
   const onDragStart = (event) => {
     if (node.isEnableDrag()) {
       event.stopPropagation();
@@ -3308,7 +3315,7 @@ var BorderButton = (props) => {
   const onClosePointerDown = (event) => {
     event.stopPropagation();
   };
-  React4.useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     node.setTabRect(layout.getBoundingClientRect(selfRef.current));
     if (layout.getEditingTab() === node) {
       contentRef.current.select();
@@ -3344,10 +3351,10 @@ var BorderButton = (props) => {
     }
   }
   const renderState = getRenderStateEx(layout, node, iconAngle);
-  let content = renderState.content ? /* @__PURE__ */ React4.createElement("div", { className: cm("flexlayout__border_button_content" /* FLEXLAYOUT__BORDER_BUTTON_CONTENT */) }, renderState.content) : null;
-  const leading = renderState.leading ? /* @__PURE__ */ React4.createElement("div", { className: cm("flexlayout__border_button_leading" /* FLEXLAYOUT__BORDER_BUTTON_LEADING */) }, renderState.leading) : null;
+  let content = renderState.content ? /* @__PURE__ */ jsx4("div", { className: cm("flexlayout__border_button_content" /* FLEXLAYOUT__BORDER_BUTTON_CONTENT */), children: renderState.content }) : null;
+  const leading = renderState.leading ? /* @__PURE__ */ jsx4("div", { className: cm("flexlayout__border_button_leading" /* FLEXLAYOUT__BORDER_BUTTON_LEADING */), children: renderState.leading }) : null;
   if (layout.getEditingTab() === node) {
-    content = /* @__PURE__ */ React4.createElement(
+    content = /* @__PURE__ */ jsx4(
       "input",
       {
         ref: contentRef,
@@ -3364,21 +3371,21 @@ var BorderButton = (props) => {
   if (node.isEnableClose()) {
     const closeTitle = layout.i18nName("Close" /* Close_Tab */);
     renderState.buttons.push(
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ jsx4(
         "div",
         {
-          key: "close",
           "data-layout-path": path + "/button/close",
           title: closeTitle,
           className: cm("flexlayout__border_button_trailing" /* FLEXLAYOUT__BORDER_BUTTON_TRAILING */),
           onPointerDown: onClosePointerDown,
-          onClick: onClose
+          onClick: onClose,
+          children: typeof icons.close === "function" ? icons.close(node) : icons.close
         },
-        typeof icons.close === "function" ? icons.close(node) : icons.close
+        "close"
       )
     );
   }
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: selfRef,
@@ -3390,30 +3397,33 @@ var BorderButton = (props) => {
       title: node.getHelpText(),
       draggable: true,
       onDragStart,
-      onDragEnd
-    },
-    leading,
-    content,
-    renderState.buttons
+      onDragEnd,
+      children: [
+        leading,
+        content,
+        renderState.buttons
+      ]
+    }
   );
 };
 
-// src/view/PopupMenu.tsx
-import * as React6 from "react";
-
 // src/view/TabButtonStamp.tsx
-import * as React5 from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var TabButtonStamp = (props) => {
   const { layout, node } = props;
   const cm = layout.getClassName;
   const classNames = cm("flexlayout__tab_button_stamp" /* FLEXLAYOUT__TAB_BUTTON_STAMP */);
   const renderState = getRenderStateEx(layout, node);
-  const content = renderState.content ? /* @__PURE__ */ React5.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : node.getNameForOverflowMenu();
-  const leading = renderState.leading ? /* @__PURE__ */ React5.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
-  return /* @__PURE__ */ React5.createElement("div", { className: classNames, title: node.getHelpText() }, leading, content);
+  const content = renderState.content ? /* @__PURE__ */ jsx5("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */), children: renderState.content }) : node.getNameForOverflowMenu();
+  const leading = renderState.leading ? /* @__PURE__ */ jsx5("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */), children: renderState.leading }) : null;
+  return /* @__PURE__ */ jsxs3("div", { className: classNames, title: node.getHelpText(), children: [
+    leading,
+    content
+  ] });
 };
 
 // src/view/PopupMenu.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
 function showPopup(triggerElement, items, onSelect, layout) {
   const layoutDiv = layout.getRootDiv();
   const classNameMapper = layout.getClassName;
@@ -3453,7 +3463,7 @@ function showPopup(triggerElement, items, onSelect, layout) {
   };
   elm.addEventListener("pointerdown", onElementPointerDown);
   currentDocument.addEventListener("pointerdown", onDocPointerDown);
-  layout.showControlInPortal(/* @__PURE__ */ React6.createElement(PopupMenu, { currentDocument, onSelect, onHide, items, classNameMapper, layout }), elm);
+  layout.showControlInPortal(/* @__PURE__ */ jsx6(PopupMenu, { currentDocument, onSelect, onHide, items, classNameMapper, layout }), elm);
 }
 var PopupMenu = (props) => {
   const { items, onHide, onSelect, classNameMapper, layout } = props;
@@ -3472,45 +3482,45 @@ var PopupMenu = (props) => {
   const onDragEnd = (_event) => {
     layout.clearDragMain();
   };
-  const itemElements = items.map((item, i) => /* @__PURE__ */ React6.createElement(
+  const itemElements = items.map((item, i) => /* @__PURE__ */ jsx6(
     "div",
     {
-      key: item.index,
       className: classNameMapper("flexlayout__popup_menu_item" /* FLEXLAYOUT__POPUP_MENU_ITEM */),
       "data-layout-path": "/popup-menu/tb" + i,
       onClick: (event) => onItemClick(item, event),
       draggable: true,
       onDragStart: (e) => onDragStart(e, item.node),
       onDragEnd,
-      title: item.node.getHelpText()
+      title: item.node.getHelpText(),
+      children: /* @__PURE__ */ jsx6(TabButtonStamp, { node: item.node, layout })
     },
-    /* @__PURE__ */ React6.createElement(TabButtonStamp, { node: item.node, layout })
+    item.index
   ));
-  return /* @__PURE__ */ React6.createElement("div", { className: classNameMapper("flexlayout__popup_menu" /* FLEXLAYOUT__POPUP_MENU */), "data-layout-path": "/popup-menu" }, itemElements);
+  return /* @__PURE__ */ jsx6("div", { className: classNameMapper("flexlayout__popup_menu" /* FLEXLAYOUT__POPUP_MENU */), "data-layout-path": "/popup-menu", children: itemElements });
 };
 
 // src/view/TabOverflowHook.tsx
-import * as React7 from "react";
+import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState2 } from "react";
 var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
-  const firstRender = React7.useRef(true);
-  const tabsTruncated = React7.useRef(false);
-  const lastRect = React7.useRef(Rect.empty());
-  const selfRef = React7.useRef(null);
-  const [position, setPosition] = React7.useState(0);
-  const userControlledLeft = React7.useRef(false);
-  const [hiddenTabs, setHiddenTabs] = React7.useState([]);
-  const lastHiddenCount = React7.useRef(0);
-  React7.useLayoutEffect(() => {
+  const firstRender = useRef4(true);
+  const tabsTruncated = useRef4(false);
+  const lastRect = useRef4(Rect.empty());
+  const selfRef = useRef4(null);
+  const [position, setPosition] = useState2(0);
+  const userControlledLeft = useRef4(false);
+  const [hiddenTabs, setHiddenTabs] = useState2([]);
+  const lastHiddenCount = useRef4(0);
+  useLayoutEffect3(() => {
     userControlledLeft.current = false;
   }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
   const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
-  React7.useLayoutEffect(() => {
+  useLayoutEffect3(() => {
     if (nodeRect.width > 0 && nodeRect.height > 0) {
       updateVisibleTabs();
     }
   }, [nodeRect.width, nodeRect.height]);
   const instance = toolbarRef.current;
-  React7.useEffect(() => {
+  useEffect2(() => {
     if (!instance) {
       return;
     }
@@ -3620,13 +3630,14 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
 };
 
 // src/view/BorderTabSet.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var BorderTabSet = (props) => {
   const { border, layout, size } = props;
-  const toolbarRef = React8.useRef(null);
-  const overflowbuttonRef = React8.useRef(null);
-  const stickyButtonsRef = React8.useRef(null);
+  const toolbarRef = useRef5(null);
+  const overflowbuttonRef = useRef5(null);
+  const stickyButtonsRef = useRef5(null);
   const icons = layout.getIcons();
-  React8.useLayoutEffect(() => {
+  useLayoutEffect4(() => {
     border.setTabHeaderRect(Rect.getBoundingClientRect(selfRef.current).relativeTo(layout.getDomRect()));
   });
   const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
@@ -3661,10 +3672,10 @@ var BorderTabSet = (props) => {
     const isSelected = border.getSelected() === i;
     const child = border.getChildren()[i];
     tabButtons.push(
-      /* @__PURE__ */ React8.createElement(BorderButton, { layout, border: border.getLocation().getName(), node: child, path: border.getPath() + "/tb" + i, key: child.getId(), selected: isSelected, icons })
+      /* @__PURE__ */ jsx7(BorderButton, { layout, border: border.getLocation().getName(), node: child, path: border.getPath() + "/tb" + i, selected: isSelected, icons }, child.getId())
     );
     if (i < border.getChildren().length - 1) {
-      tabButtons.push(/* @__PURE__ */ React8.createElement("div", { key: "divider" + i, className: cm("flexlayout__border_tab_divider" /* FLEXLAYOUT__BORDER_TAB_DIVIDER */) }));
+      tabButtons.push(/* @__PURE__ */ jsx7("div", { className: cm("flexlayout__border_tab_divider" /* FLEXLAYOUT__BORDER_TAB_DIVIDER */) }, "divider" + i));
     }
   };
   for (let i = 0; i < border.getChildren().length; i++) {
@@ -3687,18 +3698,18 @@ var BorderTabSet = (props) => {
       buttons = [...stickyButtons, ...buttons];
     } else {
       tabButtons.push(
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             ref: stickyButtonsRef,
-            key: "sticky_buttons_container",
             onPointerDown: onInterceptPointerDown,
             onDragStart: (e) => {
               e.preventDefault();
             },
-            className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */)
+            className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */),
+            children: stickyButtons
           },
-          stickyButtons
+          "sticky_buttons_container"
         )
       );
     }
@@ -3709,26 +3720,29 @@ var BorderTabSet = (props) => {
     if (typeof icons.more === "function") {
       overflowContent = icons.more(border, hiddenTabs);
     } else {
-      overflowContent = /* @__PURE__ */ React8.createElement(React8.Fragment, null, icons.more, /* @__PURE__ */ React8.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
+      overflowContent = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        icons.more,
+        /* @__PURE__ */ jsx7("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */), children: hiddenTabs.length })
+      ] });
     }
     void buttons.splice(
       Math.min(renderState.overflowPosition, buttons.length),
       0,
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ jsx7(
         "button",
         {
-          key: "overflowbutton",
           ref: overflowbuttonRef,
           className: cm("flexlayout__border_toolbar_button" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON */) + " " + cm("flexlayout__border_toolbar_button_overflow" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW */) + " " + cm("flexlayout__border_toolbar_button_overflow_" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ */ + border.getLocation().getName()),
           title: overflowTitle,
           onClick: onOverflowClick,
-          onPointerDown: onInterceptPointerDown
+          onPointerDown: onInterceptPointerDown,
+          children: overflowContent
         },
-        overflowContent
+        "overflowbutton"
       )
     );
   }
-  const toolbar = /* @__PURE__ */ React8.createElement("div", { key: "toolbar", ref: toolbarRef, className: cm("flexlayout__border_toolbar" /* FLEXLAYOUT__BORDER_TOOLBAR */) + " " + cm("flexlayout__border_toolbar_" /* FLEXLAYOUT__BORDER_TOOLBAR_ */ + border.getLocation().getName()) }, buttons);
+  const toolbar = /* @__PURE__ */ jsx7("div", { ref: toolbarRef, className: cm("flexlayout__border_toolbar" /* FLEXLAYOUT__BORDER_TOOLBAR */) + " " + cm("flexlayout__border_toolbar_" /* FLEXLAYOUT__BORDER_TOOLBAR_ */ + border.getLocation().getName()), children: buttons }, "toolbar");
   let innerStyle;
   let outerStyle;
   const borderHeight = size - 1;
@@ -3742,7 +3756,7 @@ var BorderTabSet = (props) => {
     innerStyle = { left: position };
     outerStyle = { height: borderHeight };
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: selfRef,
@@ -3755,29 +3769,33 @@ var BorderTabSet = (props) => {
       onClick: onAuxMouseClick,
       onAuxClick: onAuxMouseClick,
       onContextMenu,
-      onWheel: onMouseWheel
-    },
-    /* @__PURE__ */ React8.createElement("div", { style: outerStyle, className: cm("flexlayout__border_inner" /* FLEXLAYOUT__BORDER_INNER */) + " " + cm("flexlayout__border_inner_" /* FLEXLAYOUT__BORDER_INNER_ */ + border.getLocation().getName()) }, /* @__PURE__ */ React8.createElement("div", { style: innerStyle, className: cm("flexlayout__border_inner_tab_container" /* FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER */) + " " + cm("flexlayout__border_inner_tab_container_" /* FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ */ + border.getLocation().getName()) }, tabButtons)),
-    toolbar
+      onWheel: onMouseWheel,
+      children: [
+        /* @__PURE__ */ jsx7("div", { style: outerStyle, className: cm("flexlayout__border_inner" /* FLEXLAYOUT__BORDER_INNER */) + " " + cm("flexlayout__border_inner_" /* FLEXLAYOUT__BORDER_INNER_ */ + border.getLocation().getName()), children: /* @__PURE__ */ jsx7("div", { style: innerStyle, className: cm("flexlayout__border_inner_tab_container" /* FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER */) + " " + cm("flexlayout__border_inner_tab_container_" /* FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ */ + border.getLocation().getName()), children: tabButtons }) }),
+        toolbar
+      ]
+    }
   );
 };
 
 // src/view/DragContainer.tsx
-import * as React9 from "react";
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var DragContainer = (props) => {
   const { layout, node } = props;
-  const selfRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const selfRef = useRef6(null);
+  useEffect3(() => {
     node.setTabStamp(selfRef.current);
   }, [node, selfRef.current]);
   const cm = layout.getClassName;
   const classNames = cm("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */);
-  return /* @__PURE__ */ React9.createElement("div", { ref: selfRef, className: classNames }, /* @__PURE__ */ React9.createElement(TabButtonStamp, { key: node.getId(), layout, node }));
+  return /* @__PURE__ */ jsx8("div", { ref: selfRef, className: classNames, children: /* @__PURE__ */ jsx8(TabButtonStamp, { layout, node }, node.getId()) });
 };
 
 // src/view/ErrorBoundary.tsx
-import * as React10 from "react";
-var ErrorBoundary = class extends React10.Component {
+import { Component } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -3791,62 +3809,75 @@ var ErrorBoundary = class extends React10.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ React10.createElement("div", { className: "flexlayout__error_boundary_container" /* FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER */ }, /* @__PURE__ */ React10.createElement("div", { className: "flexlayout__error_boundary_content" /* FLEXLAYOUT__ERROR_BOUNDARY_CONTENT */ }, this.props.message));
+      return /* @__PURE__ */ jsx9("div", { className: "flexlayout__error_boundary_container" /* FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER */, children: /* @__PURE__ */ jsx9("div", { className: "flexlayout__error_boundary_content" /* FLEXLAYOUT__ERROR_BOUNDARY_CONTENT */, children: this.props.message }) });
     }
     return this.props.children;
   }
 };
 
 // src/view/Icons.tsx
-import * as React11 from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var style = { width: "1em", height: "1em", display: "flex", alignItems: "center" };
 var CloseIcon = () => {
-  return /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }), /* @__PURE__ */ React11.createElement("path", { stroke: "var(--color-icon)", fill: "var(--color-icon)", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx10("path", { fill: "none", d: "M0 0h24v24H0z" }),
+    /* @__PURE__ */ jsx10("path", { stroke: "var(--color-icon)", fill: "var(--color-icon)", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+  ] });
 };
 var MaximizeIcon = () => {
-  return /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React11.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React11.createElement("path", { stroke: "var(--color-icon)", d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
+  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)", children: [
+    /* @__PURE__ */ jsx10("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx10("path", { stroke: "var(--color-icon)", d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" })
+  ] });
 };
 var OverflowIcon = () => {
-  return /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React11.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React11.createElement("path", { stroke: "var(--color-icon)", d: "M7 10l5 5 5-5z" }));
+  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)", children: [
+    /* @__PURE__ */ jsx10("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx10("path", { stroke: "var(--color-icon)", d: "M7 10l5 5 5-5z" })
+  ] });
 };
 var EdgeIcon = () => {
-  return /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "block", width: 10, height: 10 }, preserveAspectRatio: "none", viewBox: "0 0 100 100" }, /* @__PURE__ */ React11.createElement("path", { fill: "var(--color-edge-icon)", stroke: "var(--color-edge-icon)", d: "M10 30 L90 30 l-40 40 Z" }));
+  return /* @__PURE__ */ jsx10("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "block", width: 10, height: 10 }, preserveAspectRatio: "none", viewBox: "0 0 100 100", children: /* @__PURE__ */ jsx10("path", { fill: "var(--color-edge-icon)", stroke: "var(--color-edge-icon)", d: "M10 30 L90 30 l-40 40 Z" }) });
 };
 var RestoreIcon = () => {
-  return /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React11.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React11.createElement("path", { stroke: "var(--color-icon)", d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
+  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)", children: [
+    /* @__PURE__ */ jsx10("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx10("path", { stroke: "var(--color-icon)", d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" })
+  ] });
 };
 var AsterickIcon = () => {
-  return /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, height: "24px", viewBox: "0 -960 960 960", width: "24px" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ jsx10("svg", { xmlns: "http://www.w3.org/2000/svg", style, height: "24px", viewBox: "0 -960 960 960", width: "24px", children: /* @__PURE__ */ jsx10(
     "path",
     {
       fill: "var(--color-icon)",
       stroke: "var(--color-icon)",
       d: "M440-120v-264L254-197l-57-57 187-186H120v-80h264L197-706l57-57 186 187v-264h80v264l186-187 57 57-187 186h264v80H576l187 186-57 57-186-187v264h-80Z"
     }
-  ));
+  ) });
 };
 
 // src/view/Overlay.tsx
-import * as React12 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Overlay = (props) => {
   const { layout, show } = props;
-  return /* @__PURE__ */ React12.createElement("div", { className: layout.getClassName("flexlayout__layout_overlay" /* FLEXLAYOUT__LAYOUT_OVERLAY */), style: { display: show ? "flex" : "none" } });
+  return /* @__PURE__ */ jsx11("div", { className: layout.getClassName("flexlayout__layout_overlay" /* FLEXLAYOUT__LAYOUT_OVERLAY */), style: { display: show ? "flex" : "none" } });
 };
 
 // src/view/Row.tsx
-import * as React15 from "react";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef9 } from "react";
 
 // src/view/TabSet.tsx
-import * as React14 from "react";
+import { useEffect as useEffect4, useRef as useRef8 } from "react";
 
 // src/view/TabButton.tsx
-import * as React13 from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef7 } from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var TabButton = (props) => {
   const { layout, node, selected, path } = props;
-  const selfRef = React13.useRef(null);
-  const contentRef = React13.useRef(null);
+  const selfRef = useRef7(null);
+  const contentRef = useRef7(null);
   const icons = layout.getIcons();
-  React13.useLayoutEffect(() => {
+  useLayoutEffect5(() => {
     node.setTabRect(layout.getBoundingClientRect(selfRef.current));
     if (layout.getEditingTab() === node) {
       contentRef.current.select();
@@ -3932,10 +3963,10 @@ var TabButton = (props) => {
     classNames += " " + node.getClassName();
   }
   const renderState = getRenderStateEx(layout, node);
-  let content = renderState.content ? /* @__PURE__ */ React13.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : null;
-  const leading = renderState.leading ? /* @__PURE__ */ React13.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
+  let content = renderState.content ? /* @__PURE__ */ jsx12("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */), children: renderState.content }) : null;
+  const leading = renderState.leading ? /* @__PURE__ */ jsx12("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */), children: renderState.leading }) : null;
   if (layout.getEditingTab() === node) {
-    content = /* @__PURE__ */ React13.createElement(
+    content = /* @__PURE__ */ jsx12(
       "input",
       {
         ref: contentRef,
@@ -3952,18 +3983,18 @@ var TabButton = (props) => {
   if (node.isEnableClose() && !isStretch) {
     const closeTitle = layout.i18nName("Close" /* Close_Tab */);
     renderState.buttons.push(
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ jsx12(
         "button",
         {
-          key: "close",
           "data-layout-path": path + "/button/close",
           title: closeTitle,
           className: cm("flexlayout__tab_button_trailing" /* FLEXLAYOUT__TAB_BUTTON_TRAILING */),
           onPointerDown: onClosePointerDown,
           onClick: onClose,
-          onKeyDown: onCloseKeyDown
+          onKeyDown: onCloseKeyDown,
+          children: typeof icons.close === "function" ? icons.close(node) : icons.close
         },
-        typeof icons.close === "function" ? icons.close(node) : icons.close
+        "close"
       )
     );
   }
@@ -3973,7 +4004,7 @@ var TabButton = (props) => {
       onClick();
     }
   };
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: selfRef,
@@ -3990,27 +4021,30 @@ var TabButton = (props) => {
       draggable: true,
       onDragStart,
       onDragEnd,
-      onDoubleClick
-    },
-    leading,
-    content,
-    renderState.buttons
+      onDoubleClick,
+      children: [
+        leading,
+        content,
+        renderState.buttons
+      ]
+    }
   );
 };
 
 // src/view/TabSet.tsx
 import { createPortal } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var TabSet = (props) => {
   const { node, layout } = props;
-  const tabStripRef = React14.useRef(null);
-  const tabStripInnerRef = React14.useRef(null);
-  const contentRef = React14.useRef(null);
-  const buttonBarRef = React14.useRef(null);
-  const overflowbuttonRef = React14.useRef(null);
-  const stickyButtonsRef = React14.useRef(null);
+  const tabStripRef = useRef8(null);
+  const tabStripInnerRef = useRef8(null);
+  const contentRef = useRef8(null);
+  const buttonBarRef = useRef8(null);
+  const overflowbuttonRef = useRef8(null);
+  const stickyButtonsRef = useRef8(null);
   const icons = layout.getIcons();
-  const isFirstRender = React14.useRef(true);
-  React14.useEffect(() => {
+  const isFirstRender = useRef8(true);
+  useEffect4(() => {
     node.setRect(layout.getBoundingClientRect(selfRef.current));
     if (tabStripRef.current) {
       node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));
@@ -4099,9 +4133,9 @@ var TabSet = (props) => {
     for (let i = 0; i < node.getChildren().length; i++) {
       const child = node.getChildren()[i];
       const isSelected = node.getSelected() === i;
-      tabs.push(/* @__PURE__ */ React14.createElement(TabButton, { layout, node: child, path: path + "/tb" + i, key: child.getId(), selected: isSelected }));
+      tabs.push(/* @__PURE__ */ jsx13(TabButton, { layout, node: child, path: path + "/tb" + i, selected: isSelected }, child.getId()));
       if (i < node.getChildren().length - 1) {
-        tabs.push(/* @__PURE__ */ React14.createElement("div", { key: "divider" + i, className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */) }));
+        tabs.push(/* @__PURE__ */ jsx13("div", { className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */) }, "divider" + i));
       }
     }
   }
@@ -4121,18 +4155,18 @@ var TabSet = (props) => {
       buttons = [...stickyButtons, ...buttons];
     } else {
       tabs.push(
-        /* @__PURE__ */ React14.createElement(
+        /* @__PURE__ */ jsx13(
           "div",
           {
             ref: stickyButtonsRef,
-            key: "sticky_buttons_container",
             onPointerDown: onInterceptPointerDown,
             onDragStart: (e) => {
               e.preventDefault();
             },
-            className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */)
+            className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */),
+            children: stickyButtons
           },
-          stickyButtons
+          "sticky_buttons_container"
         )
       );
     }
@@ -4144,23 +4178,26 @@ var TabSet = (props) => {
       if (typeof icons.more === "function") {
         overflowContent = icons.more(node, hiddenTabs);
       } else {
-        overflowContent = /* @__PURE__ */ React14.createElement(React14.Fragment, null, icons.more, /* @__PURE__ */ React14.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
+        overflowContent = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          icons.more,
+          /* @__PURE__ */ jsx13("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */), children: hiddenTabs.length })
+        ] });
       }
       void buttons.splice(
         Math.min(renderState.overflowPosition, buttons.length),
         0,
-        /* @__PURE__ */ React14.createElement(
+        /* @__PURE__ */ jsx13(
           "button",
           {
-            key: "overflowbutton",
             "data-layout-path": path + "/button/overflow",
             ref: overflowbuttonRef,
             className: cm("flexlayout__tab_toolbar_button" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON */) + " " + cm("flexlayout__tab_button_overflow" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW */),
             title: overflowTitle,
             onClick: onOverflowClick,
-            onPointerDown: onInterceptPointerDown
+            onPointerDown: onInterceptPointerDown,
+            children: overflowContent
           },
-          overflowContent
+          "overflowbutton"
         )
       );
     }
@@ -4169,55 +4206,55 @@ var TabSet = (props) => {
     const minTitle = layout.i18nName("Restore tab set" /* Restore */);
     const maxTitle = layout.i18nName("Maximize tab set" /* Maximize */);
     buttons.push(
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ jsx13(
         "button",
         {
-          key: "max",
           "data-layout-path": path + "/button/max",
           title: node.isMaximized() ? minTitle : maxTitle,
           className: cm("flexlayout__tab_toolbar_button" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON */) + " " + cm("flexlayout__tab_toolbar_button-" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ */ + (node.isMaximized() ? "max" : "min")),
           onClick: onMaximizeToggle,
-          onPointerDown: onInterceptPointerDown
+          onPointerDown: onInterceptPointerDown,
+          children: node.isMaximized() ? typeof icons.restore === "function" ? icons.restore(node) : icons.restore : typeof icons.maximize === "function" ? icons.maximize(node) : icons.maximize
         },
-        node.isMaximized() ? typeof icons.restore === "function" ? icons.restore(node) : icons.restore : typeof icons.maximize === "function" ? icons.maximize(node) : icons.maximize
+        "max"
       )
     );
   }
   if (!node.isMaximized() && showClose) {
     const title = isTabStretch ? layout.i18nName("Close" /* Close_Tab */) : layout.i18nName("Close tab set" /* Close_Tabset */);
     buttons.push(
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ jsx13(
         "button",
         {
-          key: "close",
           "data-layout-path": path + "/button/close",
           title,
           className: cm("flexlayout__tab_toolbar_button" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON */) + " " + cm("flexlayout__tab_toolbar_button-close" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE */),
           onClick: isTabStretch ? onCloseTab : onClose,
-          onPointerDown: onInterceptPointerDown
+          onPointerDown: onInterceptPointerDown,
+          children: typeof icons.closeTabset === "function" ? icons.closeTabset(node) : icons.closeTabset
         },
-        typeof icons.closeTabset === "function" ? icons.closeTabset(node) : icons.closeTabset
+        "close"
       )
     );
   }
   if (node.isActive() && node.isEnableActiveIcon()) {
     const title = layout.i18nName("Active tab set" /* Active_Tabset */);
     buttons.push(
-      /* @__PURE__ */ React14.createElement("div", { key: "active", "data-layout-path": path + "/button/active", title, className: cm("flexlayout__tab_toolbar_icon" /* FLEXLAYOUT__TAB_TOOLBAR_ICON */) }, typeof icons.activeTabset === "function" ? icons.activeTabset(node) : icons.activeTabset)
+      /* @__PURE__ */ jsx13("div", { "data-layout-path": path + "/button/active", title, className: cm("flexlayout__tab_toolbar_icon" /* FLEXLAYOUT__TAB_TOOLBAR_ICON */), children: typeof icons.activeTabset === "function" ? icons.activeTabset(node) : icons.activeTabset }, "active")
     );
   }
-  const buttonbar = /* @__PURE__ */ React14.createElement(
+  const buttonbar = /* @__PURE__ */ jsx13(
     "div",
     {
-      key: "buttonbar",
       ref: buttonBarRef,
       className: cm("flexlayout__tab_toolbar" /* FLEXLAYOUT__TAB_TOOLBAR */),
       onPointerDown: onInterceptPointerDown,
       onDragStart: (e) => {
         e.preventDefault();
-      }
+      },
+      children: buttons
     },
-    buttons
+    "buttonbar"
   );
   let tabStrip;
   let tabStripClasses = cm("flexlayout__tabset_tabbar_outer" /* FLEXLAYOUT__TABSET_TABBAR_OUTER */);
@@ -4239,7 +4276,7 @@ var TabSet = (props) => {
   }
   if (node.isEnableTabWrap()) {
     if (node.isEnableTabStrip()) {
-      tabStrip = /* @__PURE__ */ React14.createElement(
+      tabStrip = /* @__PURE__ */ jsxs7(
         "div",
         {
           className: tabStripClasses,
@@ -4252,16 +4289,18 @@ var TabSet = (props) => {
           onClick: onAuxMouseClick,
           onAuxClick: onAuxMouseClick,
           draggable: true,
-          onDragStart
-        },
-        tabs,
-        /* @__PURE__ */ React14.createElement("div", { style: { flexGrow: 1 } }),
-        buttonbar
+          onDragStart,
+          children: [
+            tabs,
+            /* @__PURE__ */ jsx13("div", { style: { flexGrow: 1 } }),
+            buttonbar
+          ]
+        }
       );
     }
   } else {
     if (node.isEnableTabStrip()) {
-      tabStrip = /* @__PURE__ */ React14.createElement(
+      tabStrip = /* @__PURE__ */ jsxs7(
         "div",
         {
           className: tabStripClasses,
@@ -4274,17 +4313,19 @@ var TabSet = (props) => {
           onAuxClick: onAuxMouseClick,
           draggable: true,
           onWheel: onMouseWheel,
-          onDragStart
-        },
-        /* @__PURE__ */ React14.createElement("div", { ref: tabStripInnerRef, className: cm("flexlayout__tabset_tabbar_inner" /* FLEXLAYOUT__TABSET_TABBAR_INNER */) + " " + cm("flexlayout__tabset_tabbar_inner_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_ */ + node.getTabLocation()) }, /* @__PURE__ */ React14.createElement(
-          "div",
-          {
-            style: { left: position, width: isTabStretch ? "100%" : "10000px" },
-            className: cm("flexlayout__tabset_tabbar_inner_tab_container" /* FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER */) + " " + cm("flexlayout__tabset_tabbar_inner_tab_container_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ */ + node.getTabLocation())
-          },
-          tabs
-        )),
-        buttonbar
+          onDragStart,
+          children: [
+            /* @__PURE__ */ jsx13("div", { ref: tabStripInnerRef, className: cm("flexlayout__tabset_tabbar_inner" /* FLEXLAYOUT__TABSET_TABBAR_INNER */) + " " + cm("flexlayout__tabset_tabbar_inner_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_ */ + node.getTabLocation()), children: /* @__PURE__ */ jsx13(
+              "div",
+              {
+                style: { left: position, width: isTabStretch ? "100%" : "10000px" },
+                className: cm("flexlayout__tabset_tabbar_inner_tab_container" /* FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER */) + " " + cm("flexlayout__tabset_tabbar_inner_tab_container_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ */ + node.getTabLocation()),
+                children: tabs
+              }
+            ) }),
+            buttonbar
+          ]
+        }
       );
     }
   }
@@ -4295,11 +4336,17 @@ var TabSet = (props) => {
       emptyTabset = placeHolderCallback(node);
     }
   }
-  let content = /* @__PURE__ */ React14.createElement("div", { ref: contentRef, className: cm("flexlayout__tabset_content" /* FLEXLAYOUT__TABSET_CONTENT */) }, emptyTabset);
+  let content = /* @__PURE__ */ jsx13("div", { ref: contentRef, className: cm("flexlayout__tabset_content" /* FLEXLAYOUT__TABSET_CONTENT */), children: emptyTabset });
   if (node.getTabLocation() === "top") {
-    content = /* @__PURE__ */ React14.createElement(React14.Fragment, null, tabStrip, content);
+    content = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      tabStrip,
+      content
+    ] });
   } else {
-    content = /* @__PURE__ */ React14.createElement(React14.Fragment, null, content, tabStrip);
+    content = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      content,
+      tabStrip
+    ] });
   }
   const style2 = {
     flexGrow: Math.max(1, node.getWeight() * 1e3),
@@ -4311,11 +4358,11 @@ var TabSet = (props) => {
   if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== void 0 && !node.isMaximized()) {
     style2.display = "none";
   }
-  const tabset = /* @__PURE__ */ React14.createElement("div", { ref: selfRef, className: cm("flexlayout__tabset_container" /* FLEXLAYOUT__TABSET_CONTAINER */), style: style2 }, /* @__PURE__ */ React14.createElement("div", { className: cm("flexlayout__tabset" /* FLEXLAYOUT__TABSET */), "data-layout-path": path }, content));
+  const tabset = /* @__PURE__ */ jsx13("div", { ref: selfRef, className: cm("flexlayout__tabset_container" /* FLEXLAYOUT__TABSET_CONTAINER */), style: style2, children: /* @__PURE__ */ jsx13("div", { className: cm("flexlayout__tabset" /* FLEXLAYOUT__TABSET */), "data-layout-path": path, children: content }) });
   if (node.isMaximized()) {
     if (layout.getMainElement()) {
       return createPortal(
-        /* @__PURE__ */ React14.createElement(
+        /* @__PURE__ */ jsx13(
           "div",
           {
             style: {
@@ -4325,9 +4372,9 @@ var TabSet = (props) => {
               left: 0,
               bottom: 0,
               right: 0
-            }
-          },
-          tabset
+            },
+            children: tabset
+          }
         ),
         layout.getMainElement()
       );
@@ -4340,23 +4387,24 @@ var TabSet = (props) => {
 };
 
 // src/view/Row.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
 var Row = (props) => {
   const { layout, node } = props;
-  const selfRef = React15.useRef(null);
+  const selfRef = useRef9(null);
   const horizontal = node.getOrientation() === Orientation.HORZ;
-  React15.useLayoutEffect(() => {
+  useLayoutEffect6(() => {
     node.setRect(layout.getBoundingClientRect(selfRef.current));
   });
   const items = [];
   let i = 0;
   for (const child of node.getChildren()) {
     if (i > 0) {
-      items.push(/* @__PURE__ */ React15.createElement(Splitter, { key: "splitter" + i, layout, node, index: i, horizontal }));
+      items.push(/* @__PURE__ */ jsx14(Splitter, { layout, node, index: i, horizontal }, "splitter" + i));
     }
     if (child instanceof RowNode) {
-      items.push(/* @__PURE__ */ React15.createElement(Row, { key: child.getId(), layout, node: child }));
+      items.push(/* @__PURE__ */ jsx14(Row, { layout, node: child }, child.getId()));
     } else if (child instanceof TabSetNode) {
-      items.push(/* @__PURE__ */ React15.createElement(TabSet, { key: child.getId(), layout, node: child }));
+      items.push(/* @__PURE__ */ jsx14(TabSet, { layout, node: child }, child.getId()));
     }
     i++;
   }
@@ -4373,18 +4421,19 @@ var Row = (props) => {
   } else {
     style2.flexDirection = "column";
   }
-  return /* @__PURE__ */ React15.createElement("div", { ref: selfRef, className: layout.getClassName("flexlayout__row" /* FLEXLAYOUT__ROW */), style: style2 }, items);
+  return /* @__PURE__ */ jsx14("div", { ref: selfRef, className: layout.getClassName("flexlayout__row" /* FLEXLAYOUT__ROW */), style: style2, children: items });
 };
 
 // src/view/Tab.tsx
-import * as React16 from "react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect7, useRef as useRef10 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { layout, selected, node, path } = props;
-  const selfRef = React16.useRef(null);
-  const firstSelect = React16.useRef(true);
+  const selfRef = useRef10(null);
+  const firstSelect = useRef10(true);
   const parentNode = node.getParent();
   const rect = parentNode.getContentRect();
-  React16.useLayoutEffect(() => {
+  useLayoutEffect7(() => {
     const element = node.getMoveableElement();
     selfRef.current.appendChild(element);
     node.setMoveableElement(element);
@@ -4401,7 +4450,7 @@ var Tab = (props) => {
       node.setVisible(false);
     };
   }, []);
-  React16.useEffect(() => {
+  useEffect5(() => {
     if (node.isSelected()) {
       if (firstSelect.current) {
         node.restoreScrollPosition();
@@ -4409,10 +4458,10 @@ var Tab = (props) => {
       }
     }
   }, [selected]);
-  React16.useLayoutEffect(() => {
+  useLayoutEffect7(() => {
     node.setRect(rect);
   }, [rect, node]);
-  React16.useLayoutEffect(() => {
+  useLayoutEffect7(() => {
     node.setVisible(selected);
   }, [selected, node]);
   const onPointerDown = () => {
@@ -4446,14 +4495,15 @@ var Tab = (props) => {
   if (node.getContentClassName() !== void 0) {
     className += " " + node.getContentClassName();
   }
-  return /* @__PURE__ */ React16.createElement("div", { ref: selfRef, style: style2, className, "data-layout-path": path });
+  return /* @__PURE__ */ jsx15("div", { ref: selfRef, style: style2, className, "data-layout-path": path });
 };
 
 // src/view/SizeTracker.tsx
-import * as React17 from "react";
-var SizeTracker = React17.memo(
+import { memo } from "react";
+import { Fragment as Fragment4, jsx as jsx16 } from "react/jsx-runtime";
+var SizeTracker = memo(
   ({ children }) => {
-    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, children);
+    return /* @__PURE__ */ jsx16(Fragment4, { children });
   },
   (prevProps, nextProps) => {
     return prevProps.rect.equalSize(nextProps.rect) && prevProps.selected === nextProps.selected && prevProps.forceRevision === nextProps.forceRevision && prevProps.tabsRevision === nextProps.tabsRevision;
@@ -4462,7 +4512,8 @@ var SizeTracker = React17.memo(
 SizeTracker.displayName = "SizeTracker";
 
 // src/view/Layout.tsx
-var Layout = class extends React18.Component {
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var Layout = class extends Component2 {
   /** @internal */
   selfRef;
   /** @internal */
@@ -4471,7 +4522,7 @@ var Layout = class extends React18.Component {
   /** @internal */
   constructor(props) {
     super(props);
-    this.selfRef = React18.createRef();
+    this.selfRef = createRef();
     this.revision = 0;
   }
   /** re-render the layout */
@@ -4531,10 +4582,10 @@ var Layout = class extends React18.Component {
   }
   /** @internal */
   render() {
-    return /* @__PURE__ */ React18.createElement(LayoutInternal, { ref: this.selfRef, ...this.props, renderRevision: this.revision++ });
+    return /* @__PURE__ */ jsx17(LayoutInternal, { ref: this.selfRef, ...this.props, renderRevision: this.revision++ });
   }
 };
-var LayoutInternal = class _LayoutInternal extends React18.Component {
+var LayoutInternal = class _LayoutInternal extends Component2 {
   static dragState = void 0;
   selfRef;
   moveablesRef;
@@ -4554,10 +4605,10 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
   constructor(props) {
     super(props);
     this.orderedIds = [];
-    this.selfRef = React18.createRef();
-    this.moveablesRef = React18.createRef();
-    this.mainRef = React18.createRef();
-    this.findBorderBarSizeRef = React18.createRef();
+    this.selfRef = createRef();
+    this.moveablesRef = createRef();
+    this.mainRef = createRef();
+    this.findBorderBarSizeRef = createRef();
     this.icons = { ...defaultIcons, ...props.icons };
     this.state = {
       rect: Rect.empty(),
@@ -4608,7 +4659,10 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
   }
   render() {
     if (!this.selfRef.current) {
-      return /* @__PURE__ */ React18.createElement("div", { ref: this.selfRef, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) }, /* @__PURE__ */ React18.createElement("div", { ref: this.moveablesRef, key: "__moveables__", className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }), this.renderMetricsElements());
+      return /* @__PURE__ */ jsxs8("div", { ref: this.selfRef, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */), children: [
+        /* @__PURE__ */ jsx17("div", { ref: this.moveablesRef, className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }, "__moveables__"),
+        this.renderMetricsElements()
+      ] });
     }
     const model = this.props.model;
     model.getRoot().calcMinMaxSize();
@@ -4620,8 +4674,8 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
     const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);
     const metricElements = this.renderMetricsElements();
     const tabMoveables = this.renderTabMoveables();
-    const tabStamps = /* @__PURE__ */ React18.createElement("div", { key: "__tabStamps__", className: this.getClassName("flexlayout__layout_tab_stamps" /* FLEXLAYOUT__LAYOUT_TAB_STAMPS */) }, this.renderTabStamps());
-    return /* @__PURE__ */ React18.createElement(
+    const tabStamps = /* @__PURE__ */ jsx17("div", { className: this.getClassName("flexlayout__layout_tab_stamps" /* FLEXLAYOUT__LAYOUT_TAB_STAMPS */), children: this.renderTabStamps() }, "__tabStamps__");
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         ref: this.selfRef,
@@ -4629,46 +4683,83 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
         onDragEnter: this.onDragEnterRaw,
         onDragLeave: this.onDragLeaveRaw,
         onDragOver: this.onDragOver,
-        onDrop: this.onDrop
-      },
-      /* @__PURE__ */ React18.createElement("div", { ref: this.moveablesRef, key: "__moveables__", className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }),
-      metricElements,
-      /* @__PURE__ */ React18.createElement(Overlay, { key: "__overlay__", layout: this, show: this.state.showOverlay }),
-      outer,
-      reorderedTabs,
-      tabMoveables,
-      tabStamps,
-      this.state.portal
+        onDrop: this.onDrop,
+        children: [
+          /* @__PURE__ */ jsx17("div", { ref: this.moveablesRef, className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }, "__moveables__"),
+          metricElements,
+          /* @__PURE__ */ jsx17(Overlay, { layout: this, show: this.state.showOverlay }, "__overlay__"),
+          outer,
+          reorderedTabs,
+          tabMoveables,
+          tabStamps,
+          this.state.portal
+        ]
+      }
     );
   }
   renderBorders(inner) {
     const classMain = this.getClassName("flexlayout__layout_main" /* FLEXLAYOUT__LAYOUT_MAIN */);
     const borders = this.props.model.getBorderSet().getBorderMap();
     if (borders.size > 0) {
-      inner = /* @__PURE__ */ React18.createElement("div", { className: classMain, ref: this.mainRef }, inner);
+      inner = /* @__PURE__ */ jsx17("div", { className: classMain, ref: this.mainRef, children: inner });
       const borderSetComponents = /* @__PURE__ */ new Map();
       const borderSetContentComponents = /* @__PURE__ */ new Map();
       for (const [_, location] of DockLocation.values) {
         const border = borders.get(location);
         const showBorder = border && (!border.isAutoHide() || border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location));
         if (showBorder) {
-          borderSetComponents.set(location, /* @__PURE__ */ React18.createElement(BorderTabSet, { layout: this, border, size: this.state.calculatedBorderBarSize }));
-          borderSetContentComponents.set(location, /* @__PURE__ */ React18.createElement(BorderTab, { layout: this, border, show: border.getSelected() !== -1 }));
+          borderSetComponents.set(location, /* @__PURE__ */ jsx17(BorderTabSet, { layout: this, border, size: this.state.calculatedBorderBarSize }));
+          borderSetContentComponents.set(location, /* @__PURE__ */ jsx17(BorderTab, { layout: this, border, show: border.getSelected() !== -1 }));
         }
       }
       const classBorderOuter = this.getClassName("flexlayout__layout_border_container" /* FLEXLAYOUT__LAYOUT_BORDER_CONTAINER */);
       const classBorderInner = this.getClassName("flexlayout__layout_border_container_inner" /* FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER */);
       if (this.props.model.getBorderSet().getLayoutHorizontal()) {
-        const innerWithBorderTabs2 = /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetContentComponents.get(DockLocation.TOP), /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetContentComponents.get(DockLocation.LEFT), inner, borderSetContentComponents.get(DockLocation.RIGHT)), borderSetContentComponents.get(DockLocation.BOTTOM));
-        return /* @__PURE__ */ React18.createElement("div", { className: classBorderOuter, style: { flexDirection: "column" } }, borderSetComponents.get(DockLocation.TOP), /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetComponents.get(DockLocation.LEFT), innerWithBorderTabs2, borderSetComponents.get(DockLocation.RIGHT)), borderSetComponents.get(DockLocation.BOTTOM));
+        const innerWithBorderTabs2 = /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "column" }, children: [
+          borderSetContentComponents.get(DockLocation.TOP),
+          /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "row" }, children: [
+            borderSetContentComponents.get(DockLocation.LEFT),
+            inner,
+            borderSetContentComponents.get(DockLocation.RIGHT)
+          ] }),
+          borderSetContentComponents.get(DockLocation.BOTTOM)
+        ] });
+        return /* @__PURE__ */ jsxs8("div", { className: classBorderOuter, style: { flexDirection: "column" }, children: [
+          borderSetComponents.get(DockLocation.TOP),
+          /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "row" }, children: [
+            borderSetComponents.get(DockLocation.LEFT),
+            innerWithBorderTabs2,
+            borderSetComponents.get(DockLocation.RIGHT)
+          ] }),
+          borderSetComponents.get(DockLocation.BOTTOM)
+        ] });
       }
-      const innerWithBorderTabs = /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetContentComponents.get(DockLocation.LEFT), /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetContentComponents.get(DockLocation.TOP), inner, borderSetContentComponents.get(DockLocation.BOTTOM)), borderSetContentComponents.get(DockLocation.RIGHT));
-      return /* @__PURE__ */ React18.createElement("div", { className: classBorderOuter, style: { flexDirection: "row" } }, borderSetComponents.get(DockLocation.LEFT), /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetComponents.get(DockLocation.TOP), innerWithBorderTabs, borderSetComponents.get(DockLocation.BOTTOM)), borderSetComponents.get(DockLocation.RIGHT));
-    }
-    return /* @__PURE__ */ React18.createElement("div", { className: classMain, ref: this.mainRef, style: { position: "absolute", top: 0, left: 0, bottom: 0, right: 0, display: "flex" } }, inner);
+      const innerWithBorderTabs = /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "row" }, children: [
+        borderSetContentComponents.get(DockLocation.LEFT),
+        /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "column" }, children: [
+          borderSetContentComponents.get(DockLocation.TOP),
+          inner,
+          borderSetContentComponents.get(DockLocation.BOTTOM)
+        ] }),
+        borderSetContentComponents.get(DockLocation.RIGHT)
+      ] });
+      return /* @__PURE__ */ jsxs8("div", { className: classBorderOuter, style: { flexDirection: "row" }, children: [
+        borderSetComponents.get(DockLocation.LEFT),
+        /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "column" }, children: [
+          borderSetComponents.get(DockLocation.TOP),
+          innerWithBorderTabs,
+          borderSetComponents.get(DockLocation.BOTTOM)
+        ] }),
+        borderSetComponents.get(DockLocation.RIGHT)
+      ] });
+    }
+    return /* @__PURE__ */ jsx17("div", { className: classMain, ref: this.mainRef, style: { position: "absolute", top: 0, left: 0, bottom: 0, right: 0, display: "flex" }, children: inner });
   }
   renderLayout() {
-    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Row, { key: "__row__", layout: this, node: this.props.model.getRoot() }), this.renderEdgeIndicators());
+    return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      /* @__PURE__ */ jsx17(Row, { layout: this, node: this.props.model.getRoot() }, "__row__"),
+      this.renderEdgeIndicators()
+    ] });
   }
   renderEdgeIndicators() {
     const edges = [];
@@ -4681,47 +4772,47 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
       const className = this.getClassName("flexlayout__edge_rect" /* FLEXLAYOUT__EDGE_RECT */);
       const radius = 50;
       edges.push(
-        /* @__PURE__ */ React18.createElement(
+        /* @__PURE__ */ jsx17(
           "div",
           {
-            key: "North",
             style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius },
-            className: className + " " + this.getClassName("flexlayout__edge_rect_top" /* FLEXLAYOUT__EDGE_RECT_TOP */)
+            className: className + " " + this.getClassName("flexlayout__edge_rect_top" /* FLEXLAYOUT__EDGE_RECT_TOP */),
+            children: /* @__PURE__ */ jsx17("div", { style: { transform: "rotate(180deg)" }, children: arrowIcon })
           },
-          /* @__PURE__ */ React18.createElement("div", { style: { transform: "rotate(180deg)" } }, arrowIcon)
+          "North"
         )
       );
       edges.push(
-        /* @__PURE__ */ React18.createElement(
+        /* @__PURE__ */ jsx17(
           "div",
           {
-            key: "West",
             style: { top: r.height / 2 - offset, left: 0, width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius },
-            className: className + " " + this.getClassName("flexlayout__edge_rect_left" /* FLEXLAYOUT__EDGE_RECT_LEFT */)
+            className: className + " " + this.getClassName("flexlayout__edge_rect_left" /* FLEXLAYOUT__EDGE_RECT_LEFT */),
+            children: /* @__PURE__ */ jsx17("div", { style: { transform: "rotate(90deg)" }, children: arrowIcon })
           },
-          /* @__PURE__ */ React18.createElement("div", { style: { transform: "rotate(90deg)" } }, arrowIcon)
+          "West"
         )
       );
       edges.push(
-        /* @__PURE__ */ React18.createElement(
+        /* @__PURE__ */ jsx17(
           "div",
           {
-            key: "South",
             style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius },
-            className: className + " " + this.getClassName("flexlayout__edge_rect_bottom" /* FLEXLAYOUT__EDGE_RECT_BOTTOM */)
+            className: className + " " + this.getClassName("flexlayout__edge_rect_bottom" /* FLEXLAYOUT__EDGE_RECT_BOTTOM */),
+            children: /* @__PURE__ */ jsx17("div", { children: arrowIcon })
           },
-          /* @__PURE__ */ React18.createElement("div", null, arrowIcon)
+          "South"
         )
       );
       edges.push(
-        /* @__PURE__ */ React18.createElement(
+        /* @__PURE__ */ jsx17(
           "div",
           {
-            key: "East",
             style: { top: r.height / 2 - offset, left: r.width - width, width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius },
-            className: className + " " + this.getClassName("flexlayout__edge_rect_right" /* FLEXLAYOUT__EDGE_RECT_RIGHT */)
+            className: className + " " + this.getClassName("flexlayout__edge_rect_right" /* FLEXLAYOUT__EDGE_RECT_RIGHT */),
+            children: /* @__PURE__ */ jsx17("div", { style: { transform: "rotate(-90deg)" }, children: arrowIcon })
           },
-          /* @__PURE__ */ React18.createElement("div", { style: { transform: "rotate(-90deg)" } }, arrowIcon)
+          "East"
         )
       );
     }
@@ -4741,7 +4832,7 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
           const key = child.getId();
           tabMoveables.push(
             createPortal2(
-              /* @__PURE__ */ React18.createElement(SizeTracker, { rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key }, /* @__PURE__ */ React18.createElement(ErrorBoundary, { message: this.i18nName("Error rendering component" /* Error_rendering_component */) }, this.props.factory(child))),
+              /* @__PURE__ */ jsx17(SizeTracker, { rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, children: /* @__PURE__ */ jsx17(ErrorBoundary, { message: this.i18nName("Error rendering component" /* Error_rendering_component */), children: this.props.factory(child) }) }, key),
               element,
               key
             )
@@ -4757,7 +4848,7 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
     this.props.model.visitNodes((node) => {
       if (node instanceof TabNode) {
         const child = node;
-        tabStamps.push(/* @__PURE__ */ React18.createElement(DragContainer, { key: child.getId(), layout: this, node: child }));
+        tabStamps.push(/* @__PURE__ */ jsx17(DragContainer, { layout: this, node: child }, child.getId()));
       }
     });
     return tabStamps;
@@ -4771,14 +4862,14 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
         const path = child.getPath();
         const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();
         if (renderTab) {
-          tabs.set(child.getId(), /* @__PURE__ */ React18.createElement(Tab, { key: child.getId(), layout: this, path, node: child, selected }));
+          tabs.set(child.getId(), /* @__PURE__ */ jsx17(Tab, { layout: this, path, node: child, selected }, child.getId()));
         }
       }
     });
     return tabs;
   }
   renderMetricsElements() {
-    return /* @__PURE__ */ React18.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, className: this.getClassName("flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */) }, "FindBorderBarSize");
+    return /* @__PURE__ */ jsx17("div", { ref: this.findBorderBarSizeRef, className: this.getClassName("flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */), children: "FindBorderBarSize" }, "findBorderBarSize");
   }
   checkForBorderToShow(x, y) {
     const r = this.getBoundingClientRect(this.mainRef.current);
@@ -5053,7 +5144,7 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
       const y = isInVerticalBorder ? 10 : offsetY;
       let rendered = false;
       if (this.props.onRenderDragRect) {
-        const content = /* @__PURE__ */ React18.createElement(TabButtonStamp, { key: node.getId(), layout: this, node });
+        const content = /* @__PURE__ */ jsx17(TabButtonStamp, { layout: this, node }, node.getId());
         const dragComponent = this.props.onRenderDragRect(content, node, void 0);
         if (dragComponent) {
           this.setDragComponent(event, dragComponent, x, y);
@@ -5062,7 +5153,7 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
       }
       if (!rendered) {
         if (isSafari()) {
-          this.setDragComponent(event, /* @__PURE__ */ React18.createElement(TabButtonStamp, { node, layout: this }), x, y);
+          this.setDragComponent(event, /* @__PURE__ */ jsx17(TabButtonStamp, { node, layout: this }), x, y);
         } else {
           event.dataTransfer.setDragImage(node.getTabStamp(), x, y);
         }
@@ -5070,7 +5161,7 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
     }
   };
   setDragComponent(event, component, x, y) {
-    const dragElement = /* @__PURE__ */ React18.createElement("div", { style: { position: "unset" }, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) + " " + this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */) }, component);
+    const dragElement = /* @__PURE__ */ jsx17("div", { style: { position: "unset" }, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) + " " + this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */), children: component });
     const tempDiv = this.currentDocument.createElement("div");
     tempDiv.setAttribute("data-layout-path", "/drag-rectangle");
     tempDiv.style.position = "absolute";
@@ -5201,13 +5292,13 @@ var LayoutInternal = class _LayoutInternal extends React18.Component {
 };
 var FlexLayoutVersion = "0.8.1";
 var defaultIcons = {
-  close: /* @__PURE__ */ React18.createElement(CloseIcon, null),
-  closeTabset: /* @__PURE__ */ React18.createElement(CloseIcon, null),
-  maximize: /* @__PURE__ */ React18.createElement(MaximizeIcon, null),
-  restore: /* @__PURE__ */ React18.createElement(RestoreIcon, null),
-  more: /* @__PURE__ */ React18.createElement(OverflowIcon, null),
-  edgeArrow: /* @__PURE__ */ React18.createElement(EdgeIcon, null),
-  activeTabset: /* @__PURE__ */ React18.createElement(AsterickIcon, null)
+  close: /* @__PURE__ */ jsx17(CloseIcon, {}),
+  closeTabset: /* @__PURE__ */ jsx17(CloseIcon, {}),
+  maximize: /* @__PURE__ */ jsx17(MaximizeIcon, {}),
+  restore: /* @__PURE__ */ jsx17(RestoreIcon, {}),
+  more: /* @__PURE__ */ jsx17(OverflowIcon, {}),
+  edgeArrow: /* @__PURE__ */ jsx17(EdgeIcon, {}),
+  activeTabset: /* @__PURE__ */ jsx17(AsterickIcon, {})
 };
 var edgeRectLength = 100;
 var edgeRectWidth = 10;
@@ -5227,8 +5318,8 @@ var DragState = class {
 };
 
 // src/view/OptimizedLayout.tsx
-import * as React19 from "react";
 import { memo as memo2, useCallback, useEffect as useEffect6, useLayoutEffect as useLayoutEffect8, useMemo, useRef as useRef11, useState as useState3 } from "react";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function createTabInfo(node) {
   const parent = node.getParent();
   const contentRect = parent?.getContentRect() ?? Rect.empty();
@@ -5314,7 +5405,7 @@ var TabPanel = memo2(function TabPanel2({
       isHidden = true;
     }
   }
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ref: selfRef,
@@ -5332,9 +5423,9 @@ var TabPanel = memo2(function TabPanel2({
         zIndex,
         // Tab panels receive pointer events when visible and not dragging
         pointerEvents: !isHidden && !isDragging ? "auto" : "none"
-      }
-    },
-    content
+      },
+      children: content
+    }
   );
 });
 function TabContainer({
@@ -5350,13 +5441,12 @@ function TabContainer({
   const maximizedTabset = model.getMaximizedTabset(Model.MAIN_WINDOW_ID);
   const hasMaximizedTabset = maximizedTabset !== void 0;
   const containerStyle = hasMaximizedTabset ? { zIndex: 10 } : {};
-  return /* @__PURE__ */ React19.createElement("div", { className: "flexlayout__optimized_layout_tab_container", "data-layout-path": "/tab-container", style: containerStyle }, Array.from(tabs.entries()).map(([nodeId, tabInfo]) => {
+  return /* @__PURE__ */ jsx18("div", { className: "flexlayout__optimized_layout_tab_container", "data-layout-path": "/tab-container", style: containerStyle, children: Array.from(tabs.entries()).map(([nodeId, tabInfo]) => {
     const parent = tabInfo.node.getParent();
     const isMaximized = parent instanceof TabSetNode && parent.isMaximized();
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ jsx18(
       TabPanel,
       {
-        key: nodeId,
         nodeId,
         node: tabInfo.node,
         rect: tabInfo.rect,
@@ -5368,9 +5458,10 @@ function TabContainer({
         model,
         isMaximized,
         hasMaximizedTabset
-      }
+      },
+      nodeId
     );
-  }));
+  }) });
 }
 function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, onModelChange: userOnModelChange, ...layoutProps }) {
   const [isDragging, setIsDragging] = useState3(false);
@@ -5477,11 +5568,14 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
   );
   const factory = useCallback(
     (node) => {
-      return /* @__PURE__ */ React19.createElement(TabRef, { key: node.getId(), node, selected: node.isSelected(), onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
+      return /* @__PURE__ */ jsx18(TabRef, { node, selected: node.isSelected(), onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange }, node.getId());
     },
     [handleTabMount, handleRectChange, handleVisibilityChange]
   );
-  return /* @__PURE__ */ React19.createElement("div", { className: "flexlayout__optimized_layout" }, /* @__PURE__ */ React19.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }), /* @__PURE__ */ React19.createElement(TabContainer, { tabs, renderTab, isDragging, classNameMapper, model, maximizedTabsetId }));
+  return /* @__PURE__ */ jsxs9("div", { className: "flexlayout__optimized_layout", children: [
+    /* @__PURE__ */ jsx18(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }),
+    /* @__PURE__ */ jsx18(TabContainer, { tabs, renderTab, isDragging, classNameMapper, model, maximizedTabsetId })
+  ] });
 }
 
 // src/model/walk.ts