@byeolnaerim/flex-layout 0.0.8 → 0.0.9

package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs

@@ -1,33 +1,52 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var useDrag = require('../hooks/useDrag');
-var useFlexLayoutSplitScreen = require('../hooks/useFlexLayoutSplitScreen');
-var FlexLayoutContainerStore = require('../store/FlexLayoutContainerStore');
-var styles = require('../styles/FlexLayout.module.css');
-var FlexLayout = require('./FlexLayout');
-var FlexLayoutContainer = require('./FlexLayoutContainer');
-var FlexLayoutSplitScreenDragBox = require('./FlexLayoutSplitScreenDragBox');
-var equal = require('fast-deep-equal');
-var rxjs = require('rxjs');
-var FlexLayoutSplitScreenDragBoxContainer = require('./FlexLayoutSplitScreenDragBoxContainer');
-var FlexLayoutSplitScreenDragBoxItem = require('./FlexLayoutSplitScreenDragBoxItem');
-var FlexLayoutSplitScreenDragBoxTitleMore = require('./FlexLayoutSplitScreenDragBoxTitleMore');
-var FlexLayoutSplitScreenScrollBox = require('./FlexLayoutSplitScreenScrollBox');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-var FlexLayout__default = /*#__PURE__*/_interopDefault(FlexLayout);
-var FlexLayoutContainer__default = /*#__PURE__*/_interopDefault(FlexLayoutContainer);
-var FlexLayoutSplitScreenDragBox__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreenDragBox);
-var equal__default = /*#__PURE__*/_interopDefault(equal);
-var FlexLayoutSplitScreenDragBoxContainer__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreenDragBoxContainer);
-var FlexLayoutSplitScreenDragBoxItem__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreenDragBoxItem);
-var FlexLayoutSplitScreenDragBoxTitleMore__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreenDragBoxTitleMore);
-var FlexLayoutSplitScreenScrollBox__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreenScrollBox);
-
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FlexLayoutSplitScreen_exports = {};
+__export(FlexLayoutSplitScreen_exports, {
+  default: () => FlexLayoutSplitScreen
+});
+module.exports = __toCommonJS(FlexLayoutSplitScreen_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_useDrag = require("../hooks/useDrag");
+var import_useFlexLayoutSplitScreen = require("../hooks/useFlexLayoutSplitScreen");
+var import_FlexLayoutContainerStore = require("../store/FlexLayoutContainerStore");
+var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
+var import_FlexLayout2 = __toESM(require("./FlexLayout"), 1);
+var import_FlexLayoutContainer = __toESM(require("./FlexLayoutContainer"), 1);
+var import_FlexLayoutSplitScreenDragBox = __toESM(require("./FlexLayoutSplitScreenDragBox"), 1);
+var import_fast_deep_equal = __toESM(require("fast-deep-equal"), 1);
+var import_rxjs = require("rxjs");
+var import_FlexLayoutSplitScreenDragBoxContainer = __toESM(require("./FlexLayoutSplitScreenDragBoxContainer"), 1);
+var import_FlexLayoutSplitScreenDragBoxItem = __toESM(require("./FlexLayoutSplitScreenDragBoxItem"), 1);
+var import_FlexLayoutSplitScreenDragBoxTitleMore = __toESM(require("./FlexLayoutSplitScreenDragBoxTitleMore"), 1);
+var import_FlexLayoutSplitScreenScrollBox = __toESM(require("./FlexLayoutSplitScreenScrollBox"), 1);
 function isOverDrop({
   x,
   y,
@@ -95,7 +114,7 @@ const handleUpdateDropTargetComponents = ({
   list = entries[1];
   const newComponent = {
     containerName: `${containerName + "_" + layoutName}${isUsePrefix ? "_" + orderName + "-" + list.length : ""}`,
-    component: react.cloneElement(
+    component: (0, import_react.cloneElement)(
       dropComponent,
       { key: screenKey, screenKey }
     ),
@@ -175,7 +194,7 @@ const handleUpdateDropTargetComponents = ({
     seen.add(item.containerName);
     return true;
   });
-  useDrag.dropMovementEventSubject.next({
+  import_useDrag.dropMovementEventSubject.next({
     state: "append",
     targetParentLayoutName: parentLayoutName,
     targetLayoutName: layoutName,
@@ -233,16 +252,16 @@ function FlexLayoutSplitScreen({
     layoutRef,
     setIsSplit,
     setDirection
-  } = useFlexLayoutSplitScreen.useFlexLayoutSplitScreen({
+  } = (0, import_useFlexLayoutSplitScreen.useFlexLayoutSplitScreen)({
     isSplitInitial: false,
     directionInitial: "row",
     selfContainerName: containerName,
     parentLayoutName: "",
     layoutName
   });
-  react.useEffect(() => {
-    FlexLayoutContainerStore.resetRootSplitScreen(layoutName);
-    const subscribe = FlexLayoutContainerStore.getSplitScreen(layoutName, layoutName).subscribe((layoutInfo) => {
+  (0, import_react.useEffect)(() => {
+    (0, import_FlexLayoutContainerStore.resetRootSplitScreen)(layoutName);
+    const subscribe = (0, import_FlexLayoutContainerStore.getSplitScreen)(layoutName, layoutName).subscribe((layoutInfo) => {
       if (layoutInfo) {
         setBeforeDropTargetComponent([
           ...layoutInfo.beforeDropTargetComponent
@@ -258,7 +277,7 @@ function FlexLayoutSplitScreen({
           setIsSplit(true);
         }
       } else {
-        FlexLayoutContainerStore.setSplitScreen(layoutName, layoutName, {
+        (0, import_FlexLayoutContainerStore.setSplitScreen)(layoutName, layoutName, {
           afterDropTargetComponent: [],
           beforeDropTargetComponent: [],
           centerDropTargetComponent: [
@@ -281,12 +300,12 @@ function FlexLayoutSplitScreen({
     });
     return () => {
       subscribe.unsubscribe();
-      FlexLayoutContainerStore.resetRootSplitScreen(layoutName);
+      (0, import_FlexLayoutContainerStore.removeRootSplitScreen)(layoutName);
     };
-  }, [layoutName]);
-  react.useEffect(() => {
-    const subscribe = useDrag.dropMovementEventSubject.pipe(
-      rxjs.distinctUntilChanged((prev, curr) => {
+  }, [layoutName, screenKey, navigationTitle, children, direction]);
+  (0, import_react.useEffect)(() => {
+    const subscribe = import_useDrag.dropMovementEventSubject.pipe(
+      (0, import_rxjs.distinctUntilChanged)((prev, curr) => {
         const filterChildren = (obj) => {
           const {
             children: children2,
@@ -298,7 +317,7 @@ function FlexLayoutSplitScreen({
           } = obj || {};
           return rest;
         };
-        return equal__default.default(filterChildren(prev), filterChildren(curr));
+        return (0, import_fast_deep_equal.default)(filterChildren(prev), filterChildren(curr));
       })
     ).subscribe((event) => {
       if (event.state === "remove") {
@@ -320,8 +339,8 @@ function FlexLayoutSplitScreen({
                   dropDocumentOutsideOption,
                   screenKey: event.dropTargetComponentEvent.screenKey
                 });
-                FlexLayoutContainerStore.setSplitScreen(layoutName, layoutName, {
-                  ...FlexLayoutContainerStore.getCurrentSplitScreenComponents(
+                (0, import_FlexLayoutContainerStore.setSplitScreen)(layoutName, layoutName, {
+                  ...(0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
                     layoutName,
                     layoutName
                   ) || {
@@ -341,7 +360,7 @@ function FlexLayoutSplitScreen({
                 );
               }
             };
-            const currentComponents = FlexLayoutContainerStore.getCurrentSplitScreenComponents(
+            const currentComponents = (0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
               layoutName,
               layoutName
             );
@@ -360,7 +379,7 @@ function FlexLayoutSplitScreen({
               event.targetContainerName,
               () => removeCallback("center")
             );
-            FlexLayoutContainerStore.setSplitScreen(layoutName, layoutName, {
+            (0, import_FlexLayoutContainerStore.setSplitScreen)(layoutName, layoutName, {
               afterDropTargetComponent: afterList,
               beforeDropTargetComponent: beforList,
               centerDropTargetComponent: centerList,
@@ -409,7 +428,7 @@ function FlexLayoutSplitScreen({
                 centerDropTargetComponent,
                 dropDocumentOutsideOption: dropDocumentOutsideOption2
               });
-              FlexLayoutContainerStore.setSplitScreen(layoutName, layoutName, {
+              (0, import_FlexLayoutContainerStore.setSplitScreen)(layoutName, layoutName, {
                 ...{
                   afterDropTargetComponent,
                   beforeDropTargetComponent,
@@ -427,7 +446,7 @@ function FlexLayoutSplitScreen({
                 })
               );
             } else {
-              const childScreenInfo = FlexLayoutContainerStore.getCurrentSplitScreenComponents(
+              const childScreenInfo = (0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
                 layoutName,
                 `${layoutName}_center=${centerDropTargetComponent[0].screenKey}`
               ) || {
@@ -436,7 +455,7 @@ function FlexLayoutSplitScreen({
                 centerDropTargetComponent: [],
                 direction
               };
-              FlexLayoutContainerStore.setSplitScreen(
+              (0, import_FlexLayoutContainerStore.setSplitScreen)(
                 layoutName,
                 `${layoutName}_center=${centerDropTargetComponent[0].screenKey}`,
                 {
@@ -448,7 +467,7 @@ function FlexLayoutSplitScreen({
                         containerName: `${targetContainerName}_${layoutName}_${orderName}`,
                         component: targetComponent,
                         dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: centerDropTargetComponent[0].screenKey,
+                        screenKey: dropTargetComponentEvent.screenKey,
                         navigationTitle: navigationTitle2
                       }
                     ]
@@ -471,29 +490,29 @@ function FlexLayoutSplitScreen({
     afterDropTargetComponent,
     centerDropTargetComponent
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default["flex-split-screen"]}`, ref: layoutRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      FlexLayout__default.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_FlexLayout.default["flex-split-screen"]}`, ref: layoutRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_FlexLayout2.default,
       {
         direction,
         layoutName,
         "data-is_split": isSplit,
         panelMovementMode: "bulldozer",
         children: [
-          beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: beforeDropTargetComponent.map(
+          beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: beforeDropTargetComponent.map(
             ({
               containerName: cName,
               component,
               navigationTitle: navigationTitle2,
               dropDocumentOutsideOption: dropDocumentOutsideOption2,
               screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-              FlexLayoutContainer__default.default,
+            }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_FlexLayoutContainer.default,
               {
                 containerName: cName,
                 isInitialResizable: true,
                 isResizePanel: true,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   FlexLayoutSplitScreenChild,
                   {
                     parentDirection: direction,
@@ -518,14 +537,14 @@ function FlexLayoutSplitScreen({
               },
               cName
             )
-          ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-          centerDropTargetComponent.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {}) : /* @__PURE__ */ jsxRuntime.jsx(
-            FlexLayoutContainer__default.default,
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+          centerDropTargetComponent.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_FlexLayoutContainer.default,
             {
               containerName: `${centerDropTargetComponent[0].containerName}`,
               isInitialResizable: true,
               isResizePanel: isSplit,
-              children: isSplit ? /* @__PURE__ */ jsxRuntime.jsx(
+              children: isSplit ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 FlexLayoutSplitScreenChild,
                 {
                   parentDirection: direction,
@@ -546,8 +565,8 @@ function FlexLayoutSplitScreen({
                   ],
                   rootName: layoutName
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                FlexLayoutSplitScreenScrollBox__default.default,
+              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_FlexLayoutSplitScreenScrollBox.default,
                 {
                   keyName: centerDropTargetComponent[0].containerName,
                   isDefaultScrollStyle: true,
@@ -556,20 +575,20 @@ function FlexLayoutSplitScreen({
               )
             }
           ),
-          afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: afterDropTargetComponent.map(
+          afterDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: afterDropTargetComponent.map(
             ({
               containerName: cName,
               component,
               navigationTitle: navigationTitle2,
               dropDocumentOutsideOption: dropDocumentOutsideOption2,
               screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-              FlexLayoutContainer__default.default,
+            }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_FlexLayoutContainer.default,
               {
                 containerName: cName,
                 isInitialResizable: true,
                 isResizePanel: afterDropTargetComponent.length - 1 !== i,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   FlexLayoutSplitScreenChild,
                   {
                     parentDirection: direction,
@@ -594,14 +613,14 @@ function FlexLayoutSplitScreen({
               },
               cName
             )
-          ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
         ]
       }
     ),
-    boundaryContainerSize && /* @__PURE__ */ jsxRuntime.jsx(
+    boundaryContainerSize && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
-        className: `${styles__default.default["flex-split-screen-boundary-container"]}`,
+        className: `${import_FlexLayout.default["flex-split-screen-boundary-container"]}`,
         style: { ...boundaryContainerSize },
         children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
       }
@@ -633,7 +652,7 @@ function FlexLayoutSplitScreenChild({
     layoutRef,
     setIsSplit,
     setDirection
-  } = useFlexLayoutSplitScreen.useFlexLayoutSplitScreen({
+  } = (0, import_useFlexLayoutSplitScreen.useFlexLayoutSplitScreen)({
     isSplitInitial: false,
     directionInitial: "row",
     parentDirection,
@@ -641,26 +660,31 @@ function FlexLayoutSplitScreenChild({
     parentLayoutName,
     layoutName
   });
-  const [isEmptyContent, setIsEmptyContent] = react.useState(false);
-  const [activeIndex, setActiveIndex] = react.useState(0);
-  const centerDropTargetComponentRef = react.useRef(centerDropTargetComponent);
-  const activeIndexRef = react.useRef(activeIndex);
-  react.useEffect(() => {
-    const subscribe = FlexLayoutContainerStore.getSplitScreen(rootName, `${layoutName}=${screenKey}`).pipe(rxjs.take(1)).subscribe((layoutInfo) => {
-      FlexLayoutContainerStore.setSplitScreen(rootName, `${layoutName}=${screenKey}`, {
-        afterDropTargetComponent: layoutInfo?.afterDropTargetComponent || [],
-        beforeDropTargetComponent: layoutInfo?.beforeDropTargetComponent || [],
-        centerDropTargetComponent: layoutInfo?.centerDropTargetComponent || initialCenterComponents || [],
-        direction: layoutInfo?.direction || direction
+  const [isEmptyContent, setIsEmptyContent] = (0, import_react.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
+  const centerDropTargetComponentRef = (0, import_react.useRef)(centerDropTargetComponent);
+  const initialCenterRef = (0, import_react.useRef)(
+    initialCenterComponents ?? []
+  );
+  const activeIndexRef = (0, import_react.useRef)(activeIndex);
+  (0, import_react.useEffect)(() => {
+    const storeKey = `${layoutName}=${screenKey}`;
+    const subscribe = (0, import_FlexLayoutContainerStore.getSplitScreen)(rootName, storeKey).pipe((0, import_rxjs.take)(1)).subscribe((layoutInfo) => {
+      if (layoutInfo) return;
+      (0, import_FlexLayoutContainerStore.setSplitScreen)(rootName, storeKey, {
+        afterDropTargetComponent: [],
+        beforeDropTargetComponent: [],
+        centerDropTargetComponent: initialCenterRef.current,
+        direction
       });
     });
     return () => {
-      FlexLayoutContainerStore.removeSplitScreenChild(rootName, layoutName);
+      (0, import_FlexLayoutContainerStore.removeSplitScreenChild)(rootName, `${layoutName}=${screenKey}`);
       subscribe.unsubscribe();
     };
-  }, [rootName, layoutName, initialCenterComponents]);
-  react.useEffect(() => {
-    const subscribe = FlexLayoutContainerStore.getSplitScreen(rootName, `${layoutName}=${screenKey}`).subscribe((layoutInfo) => {
+  }, [rootName, layoutName, screenKey]);
+  (0, import_react.useEffect)(() => {
+    const subscribe = (0, import_FlexLayoutContainerStore.getSplitScreen)(rootName, `${layoutName}=${screenKey}`).subscribe((layoutInfo) => {
       if (layoutInfo) {
         setBeforeDropTargetComponent([
           ...layoutInfo.beforeDropTargetComponent
@@ -675,7 +699,7 @@ function FlexLayoutSplitScreenChild({
         if (layoutInfo.beforeDropTargetComponent.length !== 0 || layoutInfo.afterDropTargetComponent.length !== 0) {
           setIsSplit(true);
         } else if (layoutInfo.beforeDropTargetComponent.length === 0 && layoutInfo.centerDropTargetComponent.length === 0 && layoutInfo.afterDropTargetComponent.length === 0) {
-          useDrag.dropMovementEventSubject.next({
+          import_useDrag.dropMovementEventSubject.next({
             state: "remove",
             targetContainerName: containerName,
             targetParentLayoutName: "",
@@ -687,11 +711,12 @@ function FlexLayoutSplitScreenChild({
     });
     return () => {
       subscribe.unsubscribe();
+      (0, import_FlexLayoutContainerStore.removeRootSplitScreen)(layoutName);
     };
   }, [rootName, layoutName]);
-  react.useEffect(() => {
-    const subscribe = useDrag.dropMovementEventSubject.pipe(
-      rxjs.distinctUntilChanged((prev, curr) => {
+  (0, import_react.useEffect)(() => {
+    const subscribe = import_useDrag.dropMovementEventSubject.pipe(
+      (0, import_rxjs.distinctUntilChanged)((prev, curr) => {
         const filterChildren = (obj) => {
           const {
             children,
@@ -703,7 +728,7 @@ function FlexLayoutSplitScreenChild({
           } = obj || {};
           return rest;
         };
-        return equal__default.default(filterChildren(prev), filterChildren(curr));
+        return (0, import_fast_deep_equal.default)(filterChildren(prev), filterChildren(curr));
       })
     ).subscribe((event) => {
       if (event.state === "remove") {
@@ -725,11 +750,11 @@ function FlexLayoutSplitScreenChild({
                   dropDocumentOutsideOption: event.dropTargetComponentEvent?.dropDocumentOutsideOption,
                   screenKey: event.dropTargetComponentEvent.screenKey
                 });
-                FlexLayoutContainerStore.setSplitScreen(
+                (0, import_FlexLayoutContainerStore.setSplitScreen)(
                   rootName,
                   `${layoutName}=${screenKey}`,
                   {
-                    ...FlexLayoutContainerStore.getCurrentSplitScreenComponents(
+                    ...(0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
                       rootName,
                       `${layoutName}=${screenKey}`
                     ) || {
@@ -750,7 +775,7 @@ function FlexLayoutSplitScreenChild({
                 );
               }
             };
-            const currentComponents = FlexLayoutContainerStore.getCurrentSplitScreenComponents(
+            const currentComponents = (0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
               rootName,
               `${layoutName}=${screenKey}`
             );
@@ -769,7 +794,7 @@ function FlexLayoutSplitScreenChild({
               event.targetContainerName,
               () => removeCallback("center")
             );
-            FlexLayoutContainerStore.setSplitScreen(
+            (0, import_FlexLayoutContainerStore.setSplitScreen)(
               rootName,
               `${layoutName}=${screenKey}`,
               {
@@ -807,7 +832,7 @@ function FlexLayoutSplitScreenChild({
             targetLayoutName === layoutName && targetComponent
           ) {
             if (dropDirection === parentDirection && orderName !== "center") {
-              useDrag.dropMovementEventSubject.next({
+              import_useDrag.dropMovementEventSubject.next({
                 state: "append",
                 targetContainerName,
                 targetParentLayoutName: "",
@@ -846,11 +871,11 @@ function FlexLayoutSplitScreenChild({
                 centerDropTargetComponent,
                 dropDocumentOutsideOption
               });
-              FlexLayoutContainerStore.setSplitScreen(
+              (0, import_FlexLayoutContainerStore.setSplitScreen)(
                 rootName,
                 `${layoutName}=${screenKey}`,
                 {
-                  ...FlexLayoutContainerStore.getCurrentSplitScreenComponents(
+                  ...(0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
                     rootName,
                     `${layoutName}=${screenKey}`
                   ) || {
@@ -887,40 +912,40 @@ function FlexLayoutSplitScreenChild({
     afterDropTargetComponent,
     centerDropTargetComponent
   ]);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     centerDropTargetComponentRef.current = centerDropTargetComponent;
   }, [centerDropTargetComponent]);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
-  const [isOnlyOneScreen, setIsOnlyOneScreen] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isEmptyContent && /* @__PURE__ */ jsxRuntime.jsxs(
+  const [isOnlyOneScreen, setIsOnlyOneScreen] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: !isEmptyContent && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: `${styles__default.default["flex-split-screen"]}`,
+      className: `${import_FlexLayout.default["flex-split-screen"]}`,
       ref: layoutRef,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          FlexLayout__default.default,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_FlexLayout2.default,
           {
             direction,
             layoutName: `${layoutName}`,
             panelMovementMode: "bulldozer",
             children: [
-              beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: beforeDropTargetComponent.map(
+              beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: beforeDropTargetComponent.map(
                 ({
                   containerName: cName,
                   component,
                   navigationTitle,
                   dropDocumentOutsideOption,
                   screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                  FlexLayoutContainer__default.default,
+                }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_FlexLayoutContainer.default,
                   {
                     containerName: cName,
                     isInitialResizable: true,
                     isResizePanel: true,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       FlexLayoutSplitScreenChild,
                       {
                         parentDirection: direction,
@@ -945,14 +970,14 @@ function FlexLayoutSplitScreenChild({
                   },
                   cName
                 )
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-              centerDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                FlexLayoutContainer__default.default,
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+              centerDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_FlexLayoutContainer.default,
                 {
                   containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
                   isInitialResizable: true,
                   isResizePanel: isSplit,
-                  children: isSplit ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-key": screenKey, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  children: isSplit ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-key": screenKey, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     FlexLayoutSplitScreenChild,
                     {
                       parentDirection: direction,
@@ -979,37 +1004,37 @@ function FlexLayoutSplitScreenChild({
                       screenKey,
                       rootName
                     }
-                  ) }) : /* @__PURE__ */ jsxRuntime.jsxs(
-                    FlexLayoutSplitScreenScrollBox__default.default,
+                  ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_FlexLayoutSplitScreenScrollBox.default,
                     {
                       keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
                       isDefaultScrollStyle: true,
                       children: [
-                        !isOnlyOneScreen && /* @__PURE__ */ jsxRuntime.jsx(
+                        !isOnlyOneScreen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "div",
                           {
-                            className: `${styles__default.default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,
-                            children: /* @__PURE__ */ jsxRuntime.jsxs(
+                            className: `${import_FlexLayout.default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                               "div",
                               {
                                 "data-is_split": isSplit,
                                 "data-layout_name": layoutName,
                                 "data-parent_layout_name": parentLayoutName,
                                 "data-container_name": `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                                className: `${styles__default.default["flex-split-screen-drag-box-title-wrapper"]}`,
+                                className: `${import_FlexLayout.default["flex-split-screen-drag-box-title-wrapper"]}`,
                                 children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    FlexLayoutSplitScreenDragBoxContainer__default.default,
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_FlexLayoutSplitScreenDragBoxContainer.default,
                                     {
                                       "data-layout_name": layoutName,
                                       layoutName,
                                       children: centerDropTargetComponent.map(
-                                        (item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                                          FlexLayoutSplitScreenDragBoxItem__default.default,
+                                        (item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          import_FlexLayoutSplitScreenDragBoxItem.default,
                                           {
                                             onClose: (ev) => {
                                               if (activeIndexRef.current === index && centerDropTargetComponent.length === 1) {
-                                                useDrag.dropMovementEventSubject.next(
+                                                import_useDrag.dropMovementEventSubject.next(
                                                   {
                                                     state: "remove",
                                                     targetContainerName: containerName,
@@ -1025,21 +1050,40 @@ function FlexLayoutSplitScreenChild({
                                                 }
                                                 setCenterDropTargetComponent(
                                                   (prev) => {
-                                                    const result = handleRemove(
+                                                    const next = handleRemove(
                                                       prev,
                                                       item.containerName,
                                                       () => {
                                                       }
                                                     );
-                                                    return result;
+                                                    const key = `${layoutName}=${screenKey}`;
+                                                    const current = (0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
+                                                      rootName,
+                                                      key
+                                                    ) || {
+                                                      afterDropTargetComponent,
+                                                      beforeDropTargetComponent,
+                                                      centerDropTargetComponent: prev,
+                                                      direction
+                                                    };
+                                                    (0, import_FlexLayoutContainerStore.setSplitScreen)(
+                                                      rootName,
+                                                      key,
+                                                      {
+                                                        ...current,
+                                                        centerDropTargetComponent: next
+                                                      }
+                                                    );
+                                                    return next;
                                                   }
                                                 );
                                               }
                                             },
                                             isActive: activeIndex === index,
-                                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                                              FlexLayoutSplitScreenDragBox__default.default,
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                              import_FlexLayoutSplitScreenDragBox.default,
                                               {
+                                                screenKey: item.screenKey,
                                                 onClick: () => {
                                                   setActiveIndex(
                                                     index
@@ -1103,7 +1147,7 @@ function FlexLayoutSplitScreenChild({
                                                       }
                                                     }
                                                     if (index === 0) {
-                                                      useDrag.dropMovementEventSubject.next(
+                                                      import_useDrag.dropMovementEventSubject.next(
                                                         {
                                                           state: "remove",
                                                           targetContainerName: item.containerName,
@@ -1113,7 +1157,7 @@ function FlexLayoutSplitScreenChild({
                                                         }
                                                       );
                                                     } else {
-                                                      useDrag.dropMovementEventSubject.next(
+                                                      import_useDrag.dropMovementEventSubject.next(
                                                         {
                                                           state: "remove",
                                                           targetContainerName: item.containerName,
@@ -1135,7 +1179,7 @@ function FlexLayoutSplitScreenChild({
                                     },
                                     layoutName
                                   ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(FlexLayoutSplitScreenDragBoxTitleMore__default.default, {})
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FlexLayoutSplitScreenDragBoxTitleMore.default, {})
                                 ]
                               }
                             )
@@ -1150,21 +1194,21 @@ function FlexLayoutSplitScreenChild({
                   )
                 },
                 (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-              afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: afterDropTargetComponent.map(
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+              afterDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: afterDropTargetComponent.map(
                 ({
                   containerName: cName,
                   component,
                   navigationTitle,
                   dropDocumentOutsideOption,
                   screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                  FlexLayoutContainer__default.default,
+                }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_FlexLayoutContainer.default,
                   {
                     containerName: cName,
                     isInitialResizable: true,
                     isResizePanel: i !== afterDropTargetComponent.length - 1,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       FlexLayoutSplitScreenChild,
                       {
                         parentDirection: direction,
@@ -1189,14 +1233,14 @@ function FlexLayoutSplitScreenChild({
                   },
                   cName
                 )
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
             ]
           }
         ),
-        boundaryContainerSize && /* @__PURE__ */ jsxRuntime.jsx(
+        boundaryContainerSize && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            className: `${styles__default.default["flex-split-screen-boundary-container"]}`,
+            className: `${import_FlexLayout.default["flex-split-screen-boundary-container"]}`,
             style: { ...boundaryContainerSize },
             children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
           }
@@ -1205,7 +1249,4 @@ function FlexLayoutSplitScreenChild({
     }
   ) });
 }
-
-module.exports = FlexLayoutSplitScreen;
-//# sourceMappingURL=FlexLayoutSplitScreen.cjs.map
 //# sourceMappingURL=FlexLayoutSplitScreen.cjs.map