@byeolnaerim/flex-layout 0.0.5 → 0.0.6

package/dist/components.js

@@ -1,8 +1,7 @@
-import { createContext, memo, useRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1, useCallback, useContext, useLayoutEffect, cloneElement } from 'react';
+import React2, { createContext, memo, useRef, useState, useEffect, Children, isValidElement, Fragment, useCallback, useContext, useLayoutEffect, cloneElement } from 'react';
 import equal from 'fast-deep-equal';
 import { BehaviorSubject, Subject, fromEvent, distinctUntilChanged as distinctUntilChanged$1, take as take$1, combineLatest, map as map$1 } from 'rxjs';
 import { throttleTime, take, filter, map, distinctUntilChanged } from 'rxjs/operators';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 // src/flex-layout/components/FlexLayout.tsx
 function updateScrollStore(subject, newValue) {
@@ -438,9 +437,11 @@ function FlexLayoutProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx(FlexLayoutContext.Provider, { value, children });
+  return /* @__PURE__ */ React.createElement(FlexLayoutContext.Provider, { value }, children);
 }
-var FlexLayout = ({
+
+// src/flex-layout/components/FlexLayout.tsx
+function FlexLayout({
   layoutName,
   direction,
   children,
@@ -449,10 +450,10 @@ var FlexLayout = ({
   panelClassName,
   panelMovementMode = "divorce",
   ...props
-}) => {
+}) {
   const containerCount = Children.count(children);
   const fitContent = direction === "row" ? "width" : "height";
-  const isFragmentElement = (node) => isValidElement(node) && node.type === Fragment$1;
+  const isFragmentElement = (node) => isValidElement(node) && node.type === Fragment;
   const nodes = Children.toArray(children).flatMap(
     (node) => isFragmentElement(node) ? Children.toArray(node.props.children) : [node]
   );
@@ -462,7 +463,7 @@ var FlexLayout = ({
   if (flattenedChildren.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     FlexLayoutProvider,
     {
       value: {
@@ -472,35 +473,31 @@ var FlexLayout = ({
         panelClassName,
         containerCount,
         fitContent
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${FlexLayout_default["flex-layout"]} ${className && className !== "" ? className : ""}`,
+        ...ref ? { ref } : {},
+        ...props,
+        "data-layout_name": layoutName,
+        "data-direction": direction
       },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `${FlexLayout_default["flex-layout"]} ${className && className !== "" ? className : ""}`,
-          ...ref ? { ref } : {},
-          ...props,
-          "data-layout_name": layoutName,
-          "data-direction": direction,
-          children: flattenedChildren.map((child, index) => {
-            if (!child || !isValidElement(child)) return null;
-            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              child,
-              /* @__PURE__ */ jsx(
-                ContainerOpenCloseProvider,
-                {
-                  layoutName,
-                  containerName: child.props.containerName,
-                  sizeName: fitContent
-                }
-              )
-            ] }, index);
-          })
-        }
-      )
-    }
-  ) });
-};
-var FlexLayout_default2 = FlexLayout;
+      flattenedChildren.map((child, index) => {
+        if (!child || !isValidElement(child)) return null;
+        return /* @__PURE__ */ React.createElement(Fragment, { key: index }, child, /* @__PURE__ */ React.createElement(
+          ContainerOpenCloseProvider,
+          {
+            layoutName,
+            containerName: child.props.containerName,
+            sizeName: fitContent
+          }
+        ));
+      })
+    )
+  ));
+}
 var useSize = (sizeName) => {
   const ref = useRef(null);
   const [size, setSize] = useState(void 0);
@@ -541,7 +538,7 @@ var flexDirectionModel = {
     resizeCursor: "ns-resize"
   }
 };
-var FlexLayoutResizePanel = ({
+function FlexLayoutResizePanel({
   direction,
   containerCount,
   panelMode = "default",
@@ -549,7 +546,7 @@ var FlexLayoutResizePanel = ({
   layoutName,
   panelClassName,
   panelMovementMode
-}) => {
+}) {
   let isResizePanelClickRef = useRef(false);
   let prevTouchEvent = null;
   let parentSizeRef = useRef(0);
@@ -628,6 +625,8 @@ var FlexLayoutResizePanel = ({
     }
     const targetFlexGrow = targetSize / (parentSizeRef.current - 1) * containerCountRef.current;
     const nextElementFlexGrow = nextElementSize / (parentSizeRef.current - 1) * containerCountRef.current;
+    if (!(targetElement instanceof HTMLElement)) return;
+    if (!(nextElement instanceof HTMLElement)) return;
     targetElement.style.flex = `${targetFlexGrow} 1 0%`;
     nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
   }
@@ -676,20 +675,21 @@ var FlexLayoutResizePanel = ({
     if (!panelRef.current) return;
     setResizePanelRef(layoutName, containerName, panelRef);
   }, [containerName, layoutName]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       id: containerName + "_resize_panel",
       className: `${FlexLayout_default["flex-resize-panel"]} ${FlexLayout_default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
       ref: panelRef,
       onMouseDown: panelMouseDownEvent,
-      onTouchStart: panelMouseDownEvent,
-      children: /* @__PURE__ */ jsx("div", { className: FlexLayout_default.hover })
-    }
+      onTouchStart: panelMouseDownEvent
+    },
+    /* @__PURE__ */ React.createElement("div", { className: FlexLayout_default.hover })
   );
-};
-var FlexLayoutResizePanel_default = FlexLayoutResizePanel;
-var FlexLayoutContainer = ({
+}
+
+// src/flex-layout/components/FlexLayoutContainer.tsx
+function FlexLayoutContainer({
   isFitContent,
   isFitResize,
   // fitContent,
@@ -703,7 +703,7 @@ var FlexLayoutContainer = ({
   children,
   className,
   panelMode
-}) => {
+}) {
   const {
     direction,
     panelMovementMode,
@@ -826,46 +826,42 @@ var FlexLayoutContainer = ({
       });
     }
   }, []);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: containerName,
+      "data-container_name": containerName,
+      ref: flexContainerRef,
+      className: `${FlexLayout_default["flex-container"]} ${className && className !== "" ? className : ""}`,
+      ...growState !== void 0 ? { ["data-grow"]: growState } : {},
+      ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
+      "data-is_resize": isInitialResizable,
+      "data-is_resize_panel": isResizePanel,
+      style: growState !== void 0 && {
+        flex: `${growState} 1 0%`
+      } || {}
+    },
+    isFitContent && /* @__PURE__ */ React.createElement(
       "div",
       {
-        id: containerName,
-        "data-container_name": containerName,
-        ref: flexContainerRef,
-        className: `${FlexLayout_default["flex-container"]} ${className && className !== "" ? className : ""}`,
-        ...growState !== void 0 ? { ["data-grow"]: growState } : {},
-        ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
-        "data-is_resize": isInitialResizable,
-        "data-is_resize_panel": isResizePanel,
-        style: growState !== void 0 && {
-          flex: `${growState} 1 0%`
-        } || {},
-        children: isFitContent && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${FlexLayout_default["flex-content-fit-wrapper"]}`,
-            ref,
-            children
-          }
-        ) || children
-      }
-    ),
-    isResizePanel && /* @__PURE__ */ jsx(
-      FlexLayoutResizePanel_default,
-      {
-        containerName,
-        layoutName,
-        direction,
-        containerCount,
-        panelMode,
-        panelClassName,
-        panelMovementMode
-      }
-    )
-  ] });
-};
-var FlexLayoutContainer_default = FlexLayoutContainer;
+        className: `${FlexLayout_default["flex-content-fit-wrapper"]}`,
+        ref
+      },
+      children
+    ) || children
+  ), isResizePanel && /* @__PURE__ */ React.createElement(
+    FlexLayoutResizePanel,
+    {
+      containerName,
+      layoutName,
+      direction,
+      containerCount,
+      panelMode,
+      panelClassName,
+      panelMovementMode
+    }
+  ));
+}
 var dragState = new Subject();
 var filterChildren = (obj) => {
   const { children, ...rest } = obj || {};
@@ -1237,10 +1233,18 @@ function FlexLayoutSplitScreenDragBox({
       velocity.current = { vx, vy };
       if (!scrollRAF.current) {
         const step = () => {
-          scrollTargetRef?.current?.scrollBy(
-            velocity.current.vx,
-            velocity.current.vy
-          );
+          const target = scrollTargetRef?.current ?? document.scrollingElement;
+          if (target?.scrollBy) {
+            target.scrollBy(
+              velocity.current.vx,
+              velocity.current.vy
+            );
+          } else {
+            window.scrollBy(
+              velocity.current.vx,
+              velocity.current.vy
+            );
+          }
           if (velocity.current.vx === 0 && velocity.current.vy === 0) {
             scrollRAF.current = null;
             return;
@@ -1392,7 +1396,7 @@ function FlexLayoutSplitScreenDragBox({
       el.removeEventListener("contextmenu", onCtx);
     };
   }, []);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `${className || ""} ${FlexLayout_default["flex-split-screen-drag-box"]}`,
@@ -1475,14 +1479,16 @@ function FlexLayoutSplitScreenDragBox({
         });
       },
       style: { ...style },
-      ...props,
-      children
-    }
-  ) });
+      ...props
+    },
+    children
+  ));
 }
 
 // src/flex-layout/styles/listScroll.module.css
 var listScroll_default = {};
+
+// src/flex-layout/components/FlexLayoutSplitScreenScrollBox.tsx
 var FlexLayoutSplitScreenScrollBox = ({
   className,
   children,
@@ -1546,7 +1552,7 @@ var FlexLayoutSplitScreenScrollBox = ({
       scrollRef.current?.removeEventListener("wheel", handleWheel);
     };
   }, []);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: scrollRef,
@@ -1569,27 +1575,29 @@ var FlexLayoutSplitScreenScrollBox = ({
         });
       },
       className: `${className || ""} ${isDefaultScrollStyle ? listScroll_default["default-scroll"] : listScroll_default["list-scroll"]} ${direction ? listScroll_default[direction] : ""}`,
-      ...props,
-      children
-    }
+      ...props
+    },
+    children
   );
 };
 var FlexLayoutSplitScreenScrollBox_default = memo(FlexLayoutSplitScreenScrollBox);
+
+// src/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.tsx
 function FlexLayoutSplitScreenDragBoxContainer({
   className,
   children,
   layoutName,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     FlexLayoutSplitScreenScrollBox_default,
     {
       keyName: layoutName,
       className: `${FlexLayout_default["flex-split-screen-drag-box-title-container"]} ${className && className !== "" && className || ""}`,
       direction: "x",
-      ...props,
-      children
-    }
+      ...props
+    },
+    children
   );
 }
 function FlexLayoutSplitScreenDragBoxItem({
@@ -1605,35 +1613,35 @@ function FlexLayoutSplitScreenDragBoxItem({
       allSplitScreenCount.next(allSplitScreenCount.value - 1);
     };
   }, []);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `${FlexLayout_default["flex-split-screen-drag-box-title-item"]} ${isActive ? FlexLayout_default["active"] : ""}`,
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
-      ]
-    }
+      ...props
+    },
+    children,
+    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: (ev) => onClose(ev) }, "X")
   );
 }
+
+// src/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.tsx
 function FlexLayoutSplitScreenDragBoxTitleMore({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(
     "button",
     {
       ...props,
-      className: `${FlexLayout_default["flex-split-screen-drag-box-title-more"]} ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx("span", { children: "." }),
-        /* @__PURE__ */ jsx("span", { children: "." }),
-        /* @__PURE__ */ jsx("span", { children: "." })
-      ]
-    }
+      className: `${FlexLayout_default["flex-split-screen-drag-box-title-more"]} ${className || ""}`
+    },
+    /* @__PURE__ */ React.createElement("span", null, "."),
+    /* @__PURE__ */ React.createElement("span", null, "."),
+    /* @__PURE__ */ React.createElement("span", null, ".")
   );
 }
+
+// src/flex-layout/components/FlexLayoutSplitScreen.tsx
 function isOverDrop({
   x,
   y,
@@ -2077,142 +2085,137 @@ function FlexLayoutSplitScreen({
     afterDropTargetComponent,
     centerDropTargetComponent
   ]);
-  return /* @__PURE__ */ jsxs("div", { className: `${FlexLayout_default["flex-split-screen"]}`, ref: layoutRef, children: [
-    /* @__PURE__ */ jsxs(
-      FlexLayout_default2,
-      {
-        direction,
-        layoutName,
-        "data-is_split": isSplit,
-        panelMovementMode: "bulldozer",
-        children: [
-          beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: beforeDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsx(
-              FlexLayoutContainer_default,
+  return /* @__PURE__ */ React.createElement("div", { className: `${FlexLayout_default["flex-split-screen"]}`, ref: layoutRef }, /* @__PURE__ */ React.createElement(
+    FlexLayout,
+    {
+      direction,
+      layoutName,
+      "data-is_split": isSplit,
+      panelMovementMode: "bulldozer"
+    },
+    beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, beforeDropTargetComponent.map(
+      ({
+        containerName: cName,
+        component,
+        navigationTitle: navigationTitle2,
+        dropDocumentOutsideOption: dropDocumentOutsideOption2,
+        screenKey: screenKey2
+      }, i) => /* @__PURE__ */ React.createElement(
+        FlexLayoutContainer,
+        {
+          containerName: cName,
+          isInitialResizable: true,
+          isResizePanel: true,
+          key: cName
+        },
+        /* @__PURE__ */ React.createElement(
+          FlexLayoutSplitScreenChild,
+          {
+            parentDirection: direction,
+            layoutName: `${layoutName}_before`,
+            parentLayoutName: layoutName,
+            containerName: cName,
+            depth: 1,
+            rootRef: layoutRef,
+            screenKey: screenKey2,
+            initialCenterComponents: [
               {
+                navigationTitle: navigationTitle2,
+                component,
                 containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: true,
-                children: /* @__PURE__ */ jsx(
-                  FlexLayoutSplitScreenChild,
-                  {
-                    parentDirection: direction,
-                    layoutName: `${layoutName}_before`,
-                    parentLayoutName: layoutName,
-                    containerName: cName,
-                    depth: 1,
-                    rootRef: layoutRef,
-                    screenKey: screenKey2,
-                    initialCenterComponents: [
-                      {
-                        navigationTitle: navigationTitle2,
-                        component,
-                        containerName: cName,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: screenKey2
-                      }
-                    ],
-                    rootName: layoutName
-                  }
-                )
-              },
-              cName
-            )
-          ) }) : /* @__PURE__ */ jsx("div", {}),
-          centerDropTargetComponent.length === 0 ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsx(
-            FlexLayoutContainer_default,
+                dropDocumentOutsideOption: dropDocumentOutsideOption2,
+                screenKey: screenKey2
+              }
+            ],
+            rootName: layoutName
+          }
+        )
+      )
+    )) : /* @__PURE__ */ React.createElement("div", null),
+    centerDropTargetComponent.length === 0 ? /* @__PURE__ */ React.createElement("div", null) : /* @__PURE__ */ React.createElement(
+      FlexLayoutContainer,
+      {
+        containerName: `${centerDropTargetComponent[0].containerName}`,
+        isInitialResizable: true,
+        isResizePanel: isSplit
+      },
+      isSplit ? /* @__PURE__ */ React.createElement(
+        FlexLayoutSplitScreenChild,
+        {
+          parentDirection: direction,
+          layoutName: `${layoutName}_center`,
+          parentLayoutName: layoutName,
+          containerName: `${centerDropTargetComponent[0].containerName}`,
+          depth: 0,
+          rootRef: layoutRef,
+          screenKey: centerDropTargetComponent[0].screenKey,
+          initialCenterComponents: [
             {
-              containerName: `${centerDropTargetComponent[0].containerName}`,
-              isInitialResizable: true,
-              isResizePanel: isSplit,
-              children: isSplit ? /* @__PURE__ */ jsx(
-                FlexLayoutSplitScreenChild,
-                {
-                  parentDirection: direction,
-                  layoutName: `${layoutName}_center`,
-                  parentLayoutName: layoutName,
-                  containerName: `${centerDropTargetComponent[0].containerName}`,
-                  depth: 0,
-                  rootRef: layoutRef,
-                  screenKey: centerDropTargetComponent[0].screenKey,
-                  initialCenterComponents: [
-                    {
-                      navigationTitle: centerDropTargetComponent[0].navigationTitle,
-                      component: centerDropTargetComponent[0].component,
-                      containerName: centerDropTargetComponent[0].containerName,
-                      dropDocumentOutsideOption: centerDropTargetComponent[0].dropDocumentOutsideOption,
-                      screenKey: centerDropTargetComponent[0].screenKey
-                    }
-                  ],
-                  rootName: layoutName
-                }
-              ) : /* @__PURE__ */ jsx(
-                FlexLayoutSplitScreenScrollBox_default,
-                {
-                  keyName: centerDropTargetComponent[0].containerName,
-                  isDefaultScrollStyle: true,
-                  children: centerDropTargetComponent[0].component
-                }
-              )
+              navigationTitle: centerDropTargetComponent[0].navigationTitle,
+              component: centerDropTargetComponent[0].component,
+              containerName: centerDropTargetComponent[0].containerName,
+              dropDocumentOutsideOption: centerDropTargetComponent[0].dropDocumentOutsideOption,
+              screenKey: centerDropTargetComponent[0].screenKey
             }
-          ),
-          afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: afterDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsx(
-              FlexLayoutContainer_default,
+          ],
+          rootName: layoutName
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        FlexLayoutSplitScreenScrollBox_default,
+        {
+          keyName: centerDropTargetComponent[0].containerName,
+          isDefaultScrollStyle: true
+        },
+        centerDropTargetComponent[0].component
+      )
+    ),
+    afterDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, afterDropTargetComponent.map(
+      ({
+        containerName: cName,
+        component,
+        navigationTitle: navigationTitle2,
+        dropDocumentOutsideOption: dropDocumentOutsideOption2,
+        screenKey: screenKey2
+      }, i) => /* @__PURE__ */ React.createElement(
+        FlexLayoutContainer,
+        {
+          containerName: cName,
+          isInitialResizable: true,
+          isResizePanel: afterDropTargetComponent.length - 1 !== i,
+          key: cName
+        },
+        /* @__PURE__ */ React.createElement(
+          FlexLayoutSplitScreenChild,
+          {
+            parentDirection: direction,
+            layoutName: `${layoutName}_after`,
+            parentLayoutName: layoutName,
+            containerName: cName,
+            depth: 1,
+            rootRef: layoutRef,
+            screenKey: screenKey2,
+            initialCenterComponents: [
               {
+                navigationTitle: navigationTitle2,
+                component,
                 containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: afterDropTargetComponent.length - 1 !== i,
-                children: /* @__PURE__ */ jsx(
-                  FlexLayoutSplitScreenChild,
-                  {
-                    parentDirection: direction,
-                    layoutName: `${layoutName}_after`,
-                    parentLayoutName: layoutName,
-                    containerName: cName,
-                    depth: 1,
-                    rootRef: layoutRef,
-                    screenKey: screenKey2,
-                    initialCenterComponents: [
-                      {
-                        navigationTitle: navigationTitle2,
-                        component,
-                        containerName: cName,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: screenKey2
-                      }
-                    ],
-                    rootName: layoutName
-                  }
-                )
-              },
-              cName
-            )
-          ) }) : /* @__PURE__ */ jsx("div", {})
-        ]
-      }
-    ),
-    boundaryContainerSize && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
-        style: { ...boundaryContainerSize },
-        children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-      }
-    )
-  ] });
+                dropDocumentOutsideOption: dropDocumentOutsideOption2,
+                screenKey: screenKey2
+              }
+            ],
+            rootName: layoutName
+          }
+        )
+      )
+    )) : /* @__PURE__ */ React.createElement("div", null)
+  ), boundaryContainerSize && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
+      style: { ...boundaryContainerSize }
+    },
+    "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
+  ));
 }
 function FlexLayoutSplitScreenChild({
   containerName,
@@ -2500,319 +2503,309 @@ function FlexLayoutSplitScreenChild({
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
   const [isOnlyOneScreen, setIsOnlyOneScreen] = useState(false);
-  return /* @__PURE__ */ jsx(Fragment, { children: !isEmptyContent && /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyContent && /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `${FlexLayout_default["flex-split-screen"]}`,
-      ref: layoutRef,
-      children: [
-        /* @__PURE__ */ jsxs(
-          FlexLayout_default2,
+      ref: layoutRef
+    },
+    /* @__PURE__ */ React.createElement(
+      FlexLayout,
+      {
+        direction,
+        layoutName: `${layoutName}`,
+        panelMovementMode: "bulldozer"
+      },
+      beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, beforeDropTargetComponent.map(
+        ({
+          containerName: cName,
+          component,
+          navigationTitle,
+          dropDocumentOutsideOption,
+          screenKey: screenKey2
+        }, i) => /* @__PURE__ */ React.createElement(
+          FlexLayoutContainer,
           {
-            direction,
-            layoutName: `${layoutName}`,
-            panelMovementMode: "bulldozer",
-            children: [
-              beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: beforeDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
+            containerName: cName,
+            isInitialResizable: true,
+            isResizePanel: true,
+            key: cName
+          },
+          /* @__PURE__ */ React.createElement(
+            FlexLayoutSplitScreenChild,
+            {
+              parentDirection: direction,
+              layoutName: `${layoutName}_before-${depth}`,
+              parentLayoutName: layoutName,
+              containerName: cName,
+              depth: depth + 1,
+              rootRef,
+              screenKey: screenKey2,
+              initialCenterComponents: [
+                {
                   navigationTitle,
+                  component,
+                  containerName: cName,
                   dropDocumentOutsideOption,
                   screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsx(
-                  FlexLayoutContainer_default,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: true,
-                    children: /* @__PURE__ */ jsx(
-                      FlexLayoutSplitScreenChild,
-                      {
-                        parentDirection: direction,
-                        layoutName: `${layoutName}_before-${depth}`,
-                        parentLayoutName: layoutName,
-                        containerName: cName,
-                        depth: depth + 1,
-                        rootRef,
-                        screenKey: screenKey2,
-                        initialCenterComponents: [
-                          {
-                            navigationTitle,
-                            component,
-                            containerName: cName,
-                            dropDocumentOutsideOption,
-                            screenKey: screenKey2
-                          }
-                        ],
-                        rootName
-                      }
-                    )
-                  },
-                  cName
-                )
-              ) }) : /* @__PURE__ */ jsx("div", {}),
-              centerDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-                FlexLayoutContainer_default,
+                }
+              ],
+              rootName
+            }
+          )
+        )
+      )) : /* @__PURE__ */ React.createElement("div", null),
+      centerDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        FlexLayoutContainer,
+        {
+          containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
+          isInitialResizable: true,
+          isResizePanel: isSplit,
+          key: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
+        },
+        isSplit ? /* @__PURE__ */ React.createElement("div", { "data-key": screenKey }, /* @__PURE__ */ React.createElement(
+          FlexLayoutSplitScreenChild,
+          {
+            parentDirection: direction,
+            layoutName: `${layoutName}_center-${depth}`,
+            parentLayoutName: layoutName,
+            containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
+            depth: depth + 1,
+            rootRef,
+            initialCenterComponents: centerDropTargetComponent.map(
+              ({
+                navigationTitle,
+                component,
+                containerName: cName,
+                dropDocumentOutsideOption,
+                screenKey: centerScreenKey
+              }) => ({
+                navigationTitle,
+                component,
+                containerName: cName,
+                dropDocumentOutsideOption,
+                screenKey: centerScreenKey
+              })
+            ),
+            screenKey,
+            rootName
+          }
+        )) : /* @__PURE__ */ React.createElement(
+          FlexLayoutSplitScreenScrollBox_default,
+          {
+            keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
+            isDefaultScrollStyle: true
+          },
+          !isOnlyOneScreen && /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper-sticky"]}`
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                "data-is_split": isSplit,
+                "data-layout_name": layoutName,
+                "data-parent_layout_name": parentLayoutName,
+                "data-container_name": `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
+                className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper"]}`
+              },
+              /* @__PURE__ */ React.createElement(
+                FlexLayoutSplitScreenDragBoxContainer,
                 {
-                  containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                  isInitialResizable: true,
-                  isResizePanel: isSplit,
-                  children: isSplit ? /* @__PURE__ */ jsx("div", { "data-key": screenKey, children: /* @__PURE__ */ jsx(
-                    FlexLayoutSplitScreenChild,
-                    {
-                      parentDirection: direction,
-                      layoutName: `${layoutName}_center-${depth}`,
-                      parentLayoutName: layoutName,
-                      containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                      depth: depth + 1,
-                      rootRef,
-                      initialCenterComponents: centerDropTargetComponent.map(
-                        ({
-                          navigationTitle,
-                          component,
-                          containerName: cName,
-                          dropDocumentOutsideOption,
-                          screenKey: centerScreenKey
-                        }) => ({
-                          navigationTitle,
-                          component,
-                          containerName: cName,
-                          dropDocumentOutsideOption,
-                          screenKey: centerScreenKey
-                        })
-                      ),
-                      screenKey,
-                      rootName
-                    }
-                  ) }) : /* @__PURE__ */ jsxs(
-                    FlexLayoutSplitScreenScrollBox_default,
+                  key: layoutName,
+                  "data-layout_name": layoutName,
+                  layoutName
+                },
+                centerDropTargetComponent.map(
+                  (item, index) => /* @__PURE__ */ React.createElement(
+                    FlexLayoutSplitScreenDragBoxItem,
                     {
-                      keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
-                      isDefaultScrollStyle: true,
-                      children: [
-                        !isOnlyOneScreen && /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,
-                            children: /* @__PURE__ */ jsxs(
-                              "div",
-                              {
-                                "data-is_split": isSplit,
-                                "data-layout_name": layoutName,
-                                "data-parent_layout_name": parentLayoutName,
-                                "data-container_name": `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                                className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper"]}`,
-                                children: [
-                                  /* @__PURE__ */ jsx(
-                                    FlexLayoutSplitScreenDragBoxContainer,
-                                    {
-                                      "data-layout_name": layoutName,
-                                      layoutName,
-                                      children: centerDropTargetComponent.map(
-                                        (item, index) => /* @__PURE__ */ jsx(
-                                          FlexLayoutSplitScreenDragBoxItem,
-                                          {
-                                            onClose: (ev) => {
-                                              if (activeIndexRef.current === index && centerDropTargetComponent.length === 1) {
-                                                dropMovementEventSubject.next(
-                                                  {
-                                                    state: "remove",
-                                                    targetContainerName: containerName,
-                                                    targetParentLayoutName: parentLayoutName,
-                                                    targetLayoutName: layoutName
-                                                  }
-                                                );
-                                              } else {
-                                                if (centerDropTargetComponent.length === activeIndexRef.current + 1) {
-                                                  setActiveIndex(
-                                                    activeIndexRef.current - 1
-                                                  );
-                                                }
-                                                setCenterDropTargetComponent(
-                                                  (prev) => {
-                                                    const result = handleRemove(
-                                                      prev,
-                                                      item.containerName,
-                                                      () => {
-                                                      }
-                                                    );
-                                                    return result;
-                                                  }
-                                                );
-                                              }
-                                            },
-                                            isActive: activeIndex === index,
-                                            children: /* @__PURE__ */ jsx(
-                                              FlexLayoutSplitScreenDragBox,
-                                              {
-                                                onClick: () => {
-                                                  setActiveIndex(
-                                                    index
-                                                  );
-                                                },
-                                                containerName: item.containerName,
-                                                dropDocumentOutsideOption: item.dropDocumentOutsideOption,
-                                                targetComponent: item.component,
-                                                navigationTitle: item.navigationTitle,
-                                                "data-container-name": item.containerName,
-                                                "data-layout-name": layoutName,
-                                                "data-parent-layout-name": parentLayoutName,
-                                                dropEndCallback: ({
-                                                  x,
-                                                  y,
-                                                  containerName: appendContainerName
-                                                }) => {
-                                                  if (!rootRef.current || !layoutRef.current)
-                                                    return;
-                                                  const isRootOver = isOverDrop(
-                                                    {
-                                                      x,
-                                                      y,
-                                                      element: rootRef.current
-                                                    }
-                                                  );
-                                                  const isLayoutInner = isInnerDrop(
-                                                    {
-                                                      x,
-                                                      y,
-                                                      element: layoutRef.current
-                                                    }
-                                                  );
-                                                  if (!isRootOver && !isLayoutInner || !isRootOver && isLayoutInner && centerDropTargetComponentRef.current.length > 1) {
-                                                    const option = {};
-                                                    if (centerDropTargetComponentRef.current.length > 1) {
-                                                      const {
-                                                        adjacentItem,
-                                                        adjacentIndex
-                                                      } = getAdjacentItem(
-                                                        centerDropTargetComponentRef.current,
-                                                        activeIndexRef.current
-                                                      );
-                                                      if (adjacentItem && activeIndexRef.current === index) {
-                                                        Object.assign(
-                                                          option,
-                                                          {
-                                                            x,
-                                                            y,
-                                                            targetComponent: adjacentItem.component,
-                                                            nextContainerName: adjacentItem.containerName,
-                                                            orderName: "center",
-                                                            dropTargetComponentEvent: {
-                                                              navigationTitle: adjacentItem.navigationTitle,
-                                                              dropDocumentOutsideOption: adjacentItem.dropDocumentOutsideOption,
-                                                              direction,
-                                                              screenKey
-                                                            }
-                                                          }
-                                                        );
-                                                      }
-                                                    }
-                                                    if (index === 0) {
-                                                      dropMovementEventSubject.next(
-                                                        {
-                                                          state: "remove",
-                                                          targetContainerName: item.containerName,
-                                                          targetParentLayoutName: parentLayoutName,
-                                                          targetLayoutName: layoutName,
-                                                          ...option
-                                                        }
-                                                      );
-                                                    } else {
-                                                      dropMovementEventSubject.next(
-                                                        {
-                                                          state: "remove",
-                                                          targetContainerName: item.containerName,
-                                                          targetParentLayoutName: "",
-                                                          targetLayoutName: layoutName,
-                                                          ...option
-                                                        }
-                                                      );
-                                                    }
-                                                  }
-                                                },
-                                                children: item.navigationTitle
-                                              }
-                                            )
-                                          },
-                                          item.navigationTitle + layoutName + item.containerName
-                                        )
-                                      )
-                                    },
-                                    layoutName
-                                  ),
-                                  /* @__PURE__ */ jsx(FlexLayoutSplitScreenDragBoxTitleMore, {})
-                                ]
-                              }
-                            )
+                      onClose: (ev) => {
+                        if (activeIndexRef.current === index && centerDropTargetComponent.length === 1) {
+                          dropMovementEventSubject.next(
+                            {
+                              state: "remove",
+                              targetContainerName: containerName,
+                              targetParentLayoutName: parentLayoutName,
+                              targetLayoutName: layoutName
+                            }
+                          );
+                        } else {
+                          if (centerDropTargetComponent.length === activeIndexRef.current + 1) {
+                            setActiveIndex(
+                              activeIndexRef.current - 1
+                            );
                           }
-                        ),
-                        (() => {
-                          const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
-                          return target.component;
-                        })()
-                      ]
-                    }
-                  )
-                },
-                (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
-              ) }) : /* @__PURE__ */ jsx("div", {}),
-              afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: afterDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsx(
-                  FlexLayoutContainer_default,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: i !== afterDropTargetComponent.length - 1,
-                    children: /* @__PURE__ */ jsx(
-                      FlexLayoutSplitScreenChild,
+                          setCenterDropTargetComponent(
+                            (prev) => {
+                              const result = handleRemove(
+                                prev,
+                                item.containerName,
+                                () => {
+                                }
+                              );
+                              return result;
+                            }
+                          );
+                        }
+                      },
+                      key: item.navigationTitle + layoutName + item.containerName,
+                      isActive: activeIndex === index
+                    },
+                    /* @__PURE__ */ React.createElement(
+                      FlexLayoutSplitScreenDragBox,
                       {
-                        parentDirection: direction,
-                        layoutName: `${layoutName}_after-${depth}`,
-                        parentLayoutName: layoutName,
-                        containerName: cName,
-                        depth: depth + 1,
-                        rootRef,
-                        screenKey: screenKey2,
-                        initialCenterComponents: [
-                          {
-                            navigationTitle,
-                            component,
-                            containerName: cName,
-                            dropDocumentOutsideOption,
-                            screenKey: screenKey2
+                        onClick: () => {
+                          setActiveIndex(
+                            index
+                          );
+                        },
+                        containerName: item.containerName,
+                        dropDocumentOutsideOption: item.dropDocumentOutsideOption,
+                        targetComponent: item.component,
+                        navigationTitle: item.navigationTitle,
+                        "data-container-name": item.containerName,
+                        "data-layout-name": layoutName,
+                        "data-parent-layout-name": parentLayoutName,
+                        dropEndCallback: ({
+                          x,
+                          y,
+                          containerName: appendContainerName
+                        }) => {
+                          if (!rootRef.current || !layoutRef.current)
+                            return;
+                          const isRootOver = isOverDrop(
+                            {
+                              x,
+                              y,
+                              element: rootRef.current
+                            }
+                          );
+                          const isLayoutInner = isInnerDrop(
+                            {
+                              x,
+                              y,
+                              element: layoutRef.current
+                            }
+                          );
+                          if (!isRootOver && !isLayoutInner || !isRootOver && isLayoutInner && centerDropTargetComponentRef.current.length > 1) {
+                            const option = {};
+                            if (centerDropTargetComponentRef.current.length > 1) {
+                              const {
+                                adjacentItem,
+                                adjacentIndex
+                              } = getAdjacentItem(
+                                centerDropTargetComponentRef.current,
+                                activeIndexRef.current
+                              );
+                              if (adjacentItem && activeIndexRef.current === index) {
+                                Object.assign(
+                                  option,
+                                  {
+                                    x,
+                                    y,
+                                    targetComponent: adjacentItem.component,
+                                    nextContainerName: adjacentItem.containerName,
+                                    orderName: "center",
+                                    dropTargetComponentEvent: {
+                                      navigationTitle: adjacentItem.navigationTitle,
+                                      dropDocumentOutsideOption: adjacentItem.dropDocumentOutsideOption,
+                                      direction,
+                                      screenKey
+                                    }
+                                  }
+                                );
+                              }
+                            }
+                            if (index === 0) {
+                              dropMovementEventSubject.next(
+                                {
+                                  state: "remove",
+                                  targetContainerName: item.containerName,
+                                  targetParentLayoutName: parentLayoutName,
+                                  targetLayoutName: layoutName,
+                                  ...option
+                                }
+                              );
+                            } else {
+                              dropMovementEventSubject.next(
+                                {
+                                  state: "remove",
+                                  targetContainerName: item.containerName,
+                                  targetParentLayoutName: "",
+                                  targetLayoutName: layoutName,
+                                  ...option
+                                }
+                              );
+                            }
                           }
-                        ],
-                        rootName
-                      }
+                        }
+                      },
+                      item.navigationTitle
                     )
-                  },
-                  cName
+                  )
                 )
-              ) }) : /* @__PURE__ */ jsx("div", {})
-            ]
-          }
-        ),
-        boundaryContainerSize && /* @__PURE__ */ jsx(
-          "div",
+              ),
+              /* @__PURE__ */ React.createElement(FlexLayoutSplitScreenDragBoxTitleMore, null)
+            )
+          ),
+          (() => {
+            const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
+            return target.component;
+          })()
+        )
+      )) : /* @__PURE__ */ React.createElement("div", null),
+      afterDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, afterDropTargetComponent.map(
+        ({
+          containerName: cName,
+          component,
+          navigationTitle,
+          dropDocumentOutsideOption,
+          screenKey: screenKey2
+        }, i) => /* @__PURE__ */ React.createElement(
+          FlexLayoutContainer,
           {
-            className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
-            style: { ...boundaryContainerSize },
-            children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-          }
+            containerName: cName,
+            isInitialResizable: true,
+            isResizePanel: i !== afterDropTargetComponent.length - 1,
+            key: cName
+          },
+          /* @__PURE__ */ React.createElement(
+            FlexLayoutSplitScreenChild,
+            {
+              parentDirection: direction,
+              layoutName: `${layoutName}_after-${depth}`,
+              parentLayoutName: layoutName,
+              containerName: cName,
+              depth: depth + 1,
+              rootRef,
+              screenKey: screenKey2,
+              initialCenterComponents: [
+                {
+                  navigationTitle,
+                  component,
+                  containerName: cName,
+                  dropDocumentOutsideOption,
+                  screenKey: screenKey2
+                }
+              ],
+              rootName
+            }
+          )
         )
-      ]
-    }
-  ) });
+      )) : /* @__PURE__ */ React.createElement("div", null)
+    ),
+    boundaryContainerSize && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
+        style: { ...boundaryContainerSize }
+      },
+      "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
+    )
+  ));
 }
-FlexLayoutSplitScreen.displayName = "FlexLayoutSplitScreen";
-var FlexLayoutSplitScreen_default = FlexLayoutSplitScreen;
 function clamp(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
@@ -3004,7 +2997,7 @@ var FlexLayoutStickyBox = ({
       }
     };
   }, [ioRoot, resolvedEdge, offset, debug]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React2.createElement(
     "div",
     {
       ref: rootRef,
@@ -3017,20 +3010,20 @@ var FlexLayoutStickyBox = ({
         // 부모 높이를 채우도록 설정
         ...style
       },
-      ...rest,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: contentRef,
-          style: contentDynamicStyle,
-          children
-        }
-      )
-    }
+      ...rest
+    },
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        ref: contentRef,
+        style: contentDynamicStyle
+      },
+      children
+    )
   );
 };
 var FlexLayoutStickyBox_default = FlexLayoutStickyBox;
 
-export { FlexLayout_default2 as FlexLayout, FlexLayoutContainer_default as FlexLayoutContainer, FlexLayoutResizePanel_default as FlexLayoutResizePanel, FlexLayoutSplitScreen_default as FlexLayoutSplitScreen, FlexLayoutSplitScreenDragBox, FlexLayoutSplitScreenScrollBox_default as FlexLayoutSplitScreenScrollBox, FlexLayoutStickyBox_default as FlexLayoutStickyBox };
+export { FlexLayout, FlexLayoutContainer, FlexLayoutResizePanel, FlexLayoutSplitScreen, FlexLayoutSplitScreenDragBox, FlexLayoutSplitScreenScrollBox_default as FlexLayoutSplitScreenScrollBox, FlexLayoutStickyBox_default as FlexLayoutStickyBox };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map