npm - @byeolnaerim/flex-layout - Versions diffs - 0.0.7 → 0.0.9 - Mend

@byeolnaerim/flex-layout 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (127) hide show

package/dist/flex-layout/components/FlexLayout.cjs CHANGED Viewed

@@ -1,15 +1,52 @@
-'use strict';
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var FlexLayoutHooks = require('../providers/FlexLayoutHooks');
-var styles = require('../styles/FlexLayout.module.css');
-var FlexLayoutContext = require('../providers/FlexLayoutContext');
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-var styles__default = /*#__PURE__*/_interopDefault(styles);
+"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 FlexLayout_exports = {};
+__export(FlexLayout_exports, {
+  default: () => FlexLayout
+});
+module.exports = __toCommonJS(FlexLayout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_FlexLayoutHooks = require("../providers/FlexLayoutHooks");
+var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
+var import_FlexLayoutContext = require("../providers/FlexLayoutContext");
+const withFlexLayout = (layoutName, fitContent, containerCount) => (WrappedComponent) => {
+  if (WrappedComponent.type === import_react.Fragment || WrappedComponent.type === "div" || WrappedComponent.type === "span") {
+    return WrappedComponent;
+  }
+  return (0, import_react.cloneElement)(WrappedComponent, {
+    layoutName,
+    fitContent,
+    containerCount
+  });
+};
 function FlexLayout({
   layoutName,
   direction,
@@ -20,20 +57,20 @@ function FlexLayout({
   panelMovementMode = "divorce",
   ...props
 }) {
-  const containerCount = react.Children.count(children);
+  const containerCount = import_react.Children.count(children);
   const fitContent = direction === "row" ? "width" : "height";
-  const isFragmentElement = (node) => react.isValidElement(node) && node.type === react.Fragment;
-  const nodes = react.Children.toArray(children).flatMap(
-    (node) => isFragmentElement(node) ? react.Children.toArray(node.props.children) : [node]
+  const isFragmentElement = (node) => (0, import_react.isValidElement)(node) && node.type === import_react.Fragment;
+  const nodes = import_react.Children.toArray(children).flatMap(
+    (node) => isFragmentElement(node) ? import_react.Children.toArray(node.props.children) : [node]
   );
   const flattenedChildren = nodes.filter(
-    react.isValidElement
+    import_react.isValidElement
   );
   if (flattenedChildren.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    FlexLayoutContext.FlexLayoutProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_FlexLayoutContext.FlexLayoutProvider,
     {
       value: {
         layoutName,
@@ -43,20 +80,20 @@ function FlexLayout({
         containerCount,
         fitContent
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          className: `${styles__default.default["flex-layout"]} ${className && className !== "" ? className : ""}`,
+          className: `${import_FlexLayout.default["flex-layout"]} ${className && className !== "" ? className : ""}`,
           ...ref ? { ref } : {},
           ...props,
           "data-layout_name": layoutName,
           "data-direction": direction,
           children: flattenedChildren.map((child, index) => {
-            if (!child || !react.isValidElement(child)) return null;
-            return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            if (!child || !(0, import_react.isValidElement)(child)) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
               child,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                FlexLayoutHooks.ContainerOpenCloseProvider,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_FlexLayoutHooks.ContainerOpenCloseProvider,
                 {
                   layoutName,
                   containerName: child.props.containerName,
@@ -70,7 +107,4 @@ function FlexLayout({
     }
   ) });
 }
-module.exports = FlexLayout;
-//# sourceMappingURL=FlexLayout.cjs.map
 //# sourceMappingURL=FlexLayout.cjs.map

package/dist/flex-layout/components/FlexLayout.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayout.tsx"],"~~names~~":["~~Children~~","isValidElement","Fragment","jsx","FlexLayoutProvider","styles","jsxs","ContainerOpenCloseProvider"],"mappings":";;;;;;;;;;;;AAuCe,SAAR,UAAA,CAA4B;AAAA,EAClC,UAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA,GAAoB,SAAA;AAAA,EACpB,GAAG;AACJ,CAAA,EAAoB;AACnB,EAAA,MAAM,cAAA,GAAiBA,cAAA,CAAS,KAAA,CAAM,QAAQ,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,SAAA,KAAc,KAAA,GAAQ,OAAA,GAAU,QAAA;AAMnD,EAAA,MAAM,oBAAoB,CAAC,IAAA,KAC1BC,qBAAe,IAAI,CAAA,IAAK,KAAK,IAAA,KAASC,cAAAA;AAKvC,EAAA,MAAM,KAAA,GAAQF,cAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,OAAA;AAAA,IAAQ,CAAC,IAAA,KACjD,iBAAA,CAAkB,IAAI,CAAA,GACnBA,cAAA,CAAS,OAAA,CAAQ,IAAA,CAAK,KAAA,CAAM,QAAQ,CAAA,GACpC,CAAC,IAAI;AAAA,GACT;AAGA,EAAA,MAAM,oBAAoB,KAAA,CAAM,MAAA;AAAA,IAC/BC;AAAA,GACD;AAEA,EAAA,IAAI,iBAAA,CAAkB,WAAW,CAAA,EAAG;AACnC,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACCE,cAAA,CAAAD,mBAAA,EAAA,EACC,QAAA,kBAAAC,cAAA;AAAA,IAACC,oCAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,UAAA;AAAA,QACA,SAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OACD;AAAA,MAEA,QAAA,kBAAAD,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,SAAA,EAAW,CAAA,EAAGE,uBAAA,CAAO,aAAa,CAAC,IAAI,SAAA,IAAa,SAAA,KAAc,EAAA,GAAK,SAAA,GAAY,EAAE,CAAA,CAAA;AAAA,UACpF,GAAI,GAAA,GAAM,EAAE,GAAA,KAAQ,EAAC;AAAA,UACrB,GAAG,KAAA;AAAA,UACJ,kBAAA,EAAkB,UAAA;AAAA,UAClB,gBAAA,EAAgB,SAAA;AAAA,UAEf,QAAA,EAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AACxC,YAAA,IAAI,CAAC,KAAA,IAAS,CAACJ,oBAAA,CAAe,KAAK,GAAG,OAAO,IAAA;AAO7C,YAAA,uBACCK,eAAA,CAACJ,gBAAA,EACC,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,8BAaDC,cAAA;AAAA,gBAACI,0CAAA;AAAA,gBAAA;AAAA,kBACA,UAAA;AAAA,kBACA,aAAA,EAAe,MAAM,KAAA,CAAM,aAAA;AAAA,kBAC3B,QAAA,EAAU;AAAA;AAAA;AACV,aAAA,EAAA,EAlBa,KAmBf,CAAA;AAAA,UAEF,CAAC;AAAA;AAAA;AACF;AAAA,GACD,EACD,CAAA;AAEF","file":"FlexLayout.cjs","sourcesContent":["import {\n\tChildren,\n\tcloneElement,\n\tFragment,\n\tisValidElement,\n\tReactElement,\n\tReactNode,\n} from \"react\";\nimport { ContainerOpenCloseProvider } from \"../providers/FlexLayoutHooks\";\nimport styles from \"../styles/FlexLayout.module.css\";\nimport {\n\tFlexContainerProps,\n\tFlexLayoutChildrenType,\n\tFlexLayoutProps,\n} from \"../types/FlexLayoutTypes\";\n\nimport { FlexLayoutProvider } from \"../providers/FlexLayoutContext\";\n\nconst withFlexLayout =\n\t(\n\t\tlayoutName: string,\n\t\tfitContent: \"width\" \| \"height\",\n\t\tcontainerCount: number,\n\t) =>\n\t(WrappedComponent: ReactElement<FlexLayoutChildrenType>) => {\n\t\tif (\n\t\t\tWrappedComponent.type === Fragment \|\|\n\t\t\tWrappedComponent.type === \"div\" \|\|\n\t\t\tWrappedComponent.type === \"span\"\n\t\t) {\n\t\t\treturn WrappedComponent; // Fragment는 수정 없이 반환\n\t\t}\n\t\treturn cloneElement(WrappedComponent, {\n\t\t\tlayoutName,\n\t\t\tfitContent,\n\t\t\tcontainerCount,\n\t\t} as Partial<FlexContainerProps>);\n\t};\n\nexport default function FlexLayout({\n\tlayoutName,\n\tdirection,\n\tchildren,\n\tref,\n\tclassName,\n\tpanelClassName,\n\tpanelMovementMode = \"divorce\",\n\t...props\n}: FlexLayoutProps) {\n\tconst containerCount = Children.count(children);\n\tconst fitContent = direction === \"row\" ? \"width\" : \"height\";\n\t// Flatten children and unwrap Fragments\n\ttype FragmentElement = ReactElement<\n\t\t{ children?: ReactNode },\n\t\ttypeof Fragment\n\t>;\n\tconst isFragmentElement = (node: ReactNode): node is FragmentElement =>\n\t\tisValidElement(node) && node.type === Fragment;\n\n\t// ...\n\n\t// Flatten children and unwrap Fragments (타입 안전)\n\tconst nodes = Children.toArray(children).flatMap((node) =>\n\t\tisFragmentElement(node)\n\t\t\t? Children.toArray(node.props.children)\n\t\t\t: [node],\n\t);\n\n\t// 엘리먼트만 남기고, props 타입을 FlexLayoutChildrenType으로 고정\n\tconst flattenedChildren = nodes.filter(\n\t\tisValidElement,\n\t) as ReactElement<FlexLayoutChildrenType>[];\n\n\tif (flattenedChildren.length === 0) {\n\t\treturn null;\n\t}\n\t//if (!childrenTemplate) return null;\n\treturn (\n\t\t<>\n\t\t\t<FlexLayoutProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tlayoutName,\n\t\t\t\t\tdirection,\n\t\t\t\t\tpanelMovementMode,\n\t\t\t\t\tpanelClassName,\n\t\t\t\t\tcontainerCount,\n\t\t\t\t\tfitContent,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles[\"flex-layout\"]} ${className && className !== \"\" ? className : \"\"}`}\n\t\t\t\t\t{...(ref ? { ref } : {})}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdata-layout_name={layoutName}\n\t\t\t\t\tdata-direction={direction}\n\t\t\t\t>\n\t\t\t\t\t{flattenedChildren.map((child, index) => {\n\t\t\t\t\t\tif (!child \|\| !isValidElement(child)) return null;\n\t\t\t\t\t\t//const key = child.key \|\| `flex-child-${index}`;\n\t\t\t\t\t\t// const wrappedChild = withFlexLayout(\n\t\t\t\t\t\t// layoutName,\n\t\t\t\t\t\t// fitContent,\n\t\t\t\t\t\t// containerCount\n\t\t\t\t\t\t// )(child);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t\t{/wrappedChild/}\n\t\t\t\t\t\t\t\t{/<FlexLayoutContainer\n {...containerProps}\n fitContent={fitContent}\n containerCount={\n (children && children.length) \|\| 0\n }\n layoutName={props.layoutName}\n >\n {child}\n </FlexLayoutContainer>/}\n\t\t\t\t\t\t\t\t{/* 클라이언트 사이드에서만 리사이즈 패널 처리 */}\n\t\t\t\t\t\t\t\t<ContainerOpenCloseProvider\n\t\t\t\t\t\t\t\t\tlayoutName={layoutName}\n\t\t\t\t\t\t\t\t\tcontainerName={child.props.containerName}\n\t\t\t\t\t\t\t\t\tsizeName={fitContent}\n\t\t\t\t\t\t\t\t></ContainerOpenCloseProvider>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</FlexLayoutProvider>\n\t\t</>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayout.tsx"],"sourcesContent":["\"use client\";\nimport {\n\tChildren,\n\tcloneElement,\n\tFragment,\n\tisValidElement,\n\tReactElement,\n\tReactNode,\n} from \"react\";\nimport { ContainerOpenCloseProvider } from \"../providers/FlexLayoutHooks\";\nimport styles from \"../styles/FlexLayout.module.css\";\nimport {\n\tFlexContainerProps,\n\tFlexLayoutChildrenType,\n\tFlexLayoutProps,\n} from \"../types/FlexLayoutTypes\";\n\nimport { FlexLayoutProvider } from \"../providers/FlexLayoutContext\";\n\nconst withFlexLayout =\n\t(\n\t\tlayoutName: string,\n\t\tfitContent: \"width\" \| \"height\",\n\t\tcontainerCount: number,\n\t) =>\n\t(WrappedComponent: ReactElement<FlexLayoutChildrenType>) => {\n\t\tif (\n\t\t\tWrappedComponent.type === Fragment \|\|\n\t\t\tWrappedComponent.type === \"div\" \|\|\n\t\t\tWrappedComponent.type === \"span\"\n\t\t) {\n\t\t\treturn WrappedComponent; // Fragment는 수정 없이 반환\n\t\t}\n\t\treturn cloneElement(WrappedComponent, {\n\t\t\tlayoutName,\n\t\t\tfitContent,\n\t\t\tcontainerCount,\n\t\t} as Partial<FlexContainerProps>);\n\t};\n\nexport default function FlexLayout({\n\tlayoutName,\n\tdirection,\n\tchildren,\n\tref,\n\tclassName,\n\tpanelClassName,\n\tpanelMovementMode = \"divorce\",\n\t...props\n}: FlexLayoutProps) {\n\tconst containerCount = Children.count(children);\n\tconst fitContent = direction === \"row\" ? \"width\" : \"height\";\n\t// Flatten children and unwrap Fragments\n\ttype FragmentElement = ReactElement<\n\t\t{ children?: ReactNode },\n\t\ttypeof Fragment\n\t>;\n\tconst isFragmentElement = (node: ReactNode): node is FragmentElement =>\n\t\tisValidElement(node) && node.type === Fragment;\n\n\t// ...\n\n\t// Flatten children and unwrap Fragments (타입 안전)\n\tconst nodes = Children.toArray(children).flatMap((node) =>\n\t\tisFragmentElement(node)\n\t\t\t? Children.toArray(node.props.children)\n\t\t\t: [node],\n\t);\n\n\t// 엘리먼트만 남기고, props 타입을 FlexLayoutChildrenType으로 고정\n\tconst flattenedChildren = nodes.filter(\n\t\tisValidElement,\n\t) as ReactElement<FlexLayoutChildrenType>[];\n\n\tif (flattenedChildren.length === 0) {\n\t\treturn null;\n\t}\n\t//if (!childrenTemplate) return null;\n\treturn (\n\t\t<>\n\t\t\t<FlexLayoutProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tlayoutName,\n\t\t\t\t\tdirection,\n\t\t\t\t\tpanelMovementMode,\n\t\t\t\t\tpanelClassName,\n\t\t\t\t\tcontainerCount,\n\t\t\t\t\tfitContent,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles[\"flex-layout\"]} ${className && className !== \"\" ? className : \"\"}`}\n\t\t\t\t\t{...(ref ? { ref } : {})}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdata-layout_name={layoutName}\n\t\t\t\t\tdata-direction={direction}\n\t\t\t\t>\n\t\t\t\t\t{flattenedChildren.map((child, index) => {\n\t\t\t\t\t\tif (!child \|\| !isValidElement(child)) return null;\n\t\t\t\t\t\t//const key = child.key \|\| `flex-child-${index}`;\n\t\t\t\t\t\t// const wrappedChild = withFlexLayout(\n\t\t\t\t\t\t// layoutName,\n\t\t\t\t\t\t// fitContent,\n\t\t\t\t\t\t// containerCount\n\t\t\t\t\t\t// )(child);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t\t{/wrappedChild/}\n\t\t\t\t\t\t\t\t{/<FlexLayoutContainer\n {...containerProps}\n fitContent={fitContent}\n containerCount={\n (children && children.length) \|\| 0\n }\n layoutName={props.layoutName}\n >\n {child}\n </FlexLayoutContainer>/}\n\t\t\t\t\t\t\t\t{/* 클라이언트 사이드에서만 리사이즈 패널 처리 */}\n\t\t\t\t\t\t\t\t<ContainerOpenCloseProvider\n\t\t\t\t\t\t\t\t\tlayoutName={layoutName}\n\t\t\t\t\t\t\t\t\tcontainerName={child.props.containerName}\n\t\t\t\t\t\t\t\t\tsizeName={fitContent}\n\t\t\t\t\t\t\t\t></ContainerOpenCloseProvider>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</FlexLayoutProvider>\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EE;AA9EF,mBAOO;AACP,6BAA2C;AAC3C,wBAAmB;AAOnB,+BAAmC;AAEnC,MAAM,iBACL,CACC,YACA,YACA,mBAED,CAAC,qBAA2D;AAC3D,MACC,iBAAiB,SAAS,yBAC1B,iBAAiB,SAAS,SAC1B,iBAAiB,SAAS,QACzB;AACD,WAAO;AAAA,EACR;AACA,aAAO,2BAAa,kBAAkB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAgC;AACjC;AAEc,SAAR,WAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACJ,GAAoB;AACnB,QAAM,iBAAiB,sBAAS,MAAM,QAAQ;AAC9C,QAAM,aAAa,cAAc,QAAQ,UAAU;AAMnD,QAAM,oBAAoB,CAAC,aAC1B,6BAAe,IAAI,KAAK,KAAK,SAAS;AAKvC,QAAM,QAAQ,sBAAS,QAAQ,QAAQ,EAAE;AAAA,IAAQ,CAAC,SACjD,kBAAkB,IAAI,IACnB,sBAAS,QAAQ,KAAK,MAAM,QAAQ,IACpC,CAAC,IAAI;AAAA,EACT;AAGA,QAAM,oBAAoB,MAAM;AAAA,IAC/B;AAAA,EACD;AAEA,MAAI,kBAAkB,WAAW,GAAG;AACnC,WAAO;AAAA,EACR;AAEA,SACC,2EACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,kBAAAA,QAAO,aAAa,CAAC,IAAI,aAAa,cAAc,KAAK,YAAY,EAAE;AAAA,UACpF,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC;AAAA,UACrB,GAAG;AAAA,UACJ,oBAAkB;AAAA,UAClB,kBAAgB;AAAA,UAEf,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACxC,gBAAI,CAAC,SAAS,KAAC,6BAAe,KAAK,EAAG,QAAO;AAO7C,mBACC,6CAAC,yBACC;AAAA;AAAA,cAaD;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,eAAe,MAAM,MAAM;AAAA,kBAC3B,UAAU;AAAA;AAAA,cACV;AAAA,iBAlBa,KAmBf;AAAA,UAEF,CAAC;AAAA;AAAA,MACF;AAAA;AAAA,EACD,GACD;AAEF;","names":["styles"]}

package/dist/flex-layout/components/FlexLayout.js CHANGED Viewed

@@ -1,9 +1,24 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Children, isValidElement, Fragment as Fragment$1 } from 'react';
-import { ContainerOpenCloseProvider } from '../providers/FlexLayoutHooks';
-import styles from '../styles/FlexLayout.module.css';
-import { FlexLayoutProvider } from '../providers/FlexLayoutContext';
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  cloneElement,
+  Fragment as Fragment2,
+  isValidElement
+} from "react";
+import { ContainerOpenCloseProvider } from "../providers/FlexLayoutHooks";
+import styles from "../styles/FlexLayout.module.css";
+import { FlexLayoutProvider } from "../providers/FlexLayoutContext";
+const withFlexLayout = (layoutName, fitContent, containerCount) => (WrappedComponent) => {
+  if (WrappedComponent.type === Fragment2 || WrappedComponent.type === "div" || WrappedComponent.type === "span") {
+    return WrappedComponent;
+  }
+  return cloneElement(WrappedComponent, {
+    layoutName,
+    fitContent,
+    containerCount
+  });
+};
 function FlexLayout({
   layoutName,
   direction,
@@ -16,7 +31,7 @@ function FlexLayout({
 }) {
   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 === Fragment2;
   const nodes = Children.toArray(children).flatMap(
     (node) => isFragmentElement(node) ? Children.toArray(node.props.children) : [node]
   );
@@ -47,7 +62,7 @@ function FlexLayout({
           "data-direction": direction,
           children: flattenedChildren.map((child, index) => {
             if (!child || !isValidElement(child)) return null;
-            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            return /* @__PURE__ */ jsxs(Fragment2, { children: [
               child,
               /* @__PURE__ */ jsx(
                 ContainerOpenCloseProvider,
@@ -64,7 +79,7 @@ function FlexLayout({
     }
   ) });
 }
-export { FlexLayout as default };
-//# sourceMappingURL=FlexLayout.js.map
+export {
+  FlexLayout as default
+};
 //# sourceMappingURL=FlexLayout.js.map

package/dist/flex-layout/components/FlexLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayout.tsx"],"~~names~~":["~~Fragment~~"],"mappings":";;;;;;AAuCe,SAAR,UAAA,CAA4B;AAAA,EAClC,UAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA,GAAoB,SAAA;AAAA,EACpB,GAAG;AACJ,CAAA,EAAoB;AACnB,EAAA,MAAM,cAAA,GAAiB,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,SAAA,KAAc,KAAA,GAAQ,OAAA,GAAU,QAAA;AAMnD,EAAA,MAAM,oBAAoB,CAAC,IAAA,KAC1B,eAAe,IAAI,CAAA,IAAK,KAAK,IAAA,KAASA,UAAAA;AAKvC,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,OAAA;AAAA,IAAQ,CAAC,IAAA,KACjD,iBAAA,CAAkB,IAAI,CAAA,GACnB,QAAA,CAAS,OAAA,CAAQ,IAAA,CAAK,KAAA,CAAM,QAAQ,CAAA,GACpC,CAAC,IAAI;AAAA,GACT;AAGA,EAAA,MAAM,oBAAoB,KAAA,CAAM,MAAA;AAAA,IAC/B;AAAA,GACD;AAEA,EAAA,IAAI,iBAAA,CAAkB,WAAW,CAAA,EAAG;AACnC,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACC,GAAA,CAAA,QAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,UAAA;AAAA,QACA,SAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OACD;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,SAAA,EAAW,CAAA,EAAG,MAAA,CAAO,aAAa,CAAC,IAAI,SAAA,IAAa,SAAA,KAAc,EAAA,GAAK,SAAA,GAAY,EAAE,CAAA,CAAA;AAAA,UACpF,GAAI,GAAA,GAAM,EAAE,GAAA,KAAQ,EAAC;AAAA,UACrB,GAAG,KAAA;AAAA,UACJ,kBAAA,EAAkB,UAAA;AAAA,UAClB,gBAAA,EAAgB,SAAA;AAAA,UAEf,QAAA,EAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AACxC,YAAA,IAAI,CAAC,KAAA,IAAS,CAAC,cAAA,CAAe,KAAK,GAAG,OAAO,IAAA;AAO7C,YAAA,uBACC,IAAA,CAACA,YAAA,EACC,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,8BAaD,GAAA;AAAA,gBAAC,0BAAA;AAAA,gBAAA;AAAA,kBACA,UAAA;AAAA,kBACA,aAAA,EAAe,MAAM,KAAA,CAAM,aAAA;AAAA,kBAC3B,QAAA,EAAU;AAAA;AAAA;AACV,aAAA,EAAA,EAlBa,KAmBf,CAAA;AAAA,UAEF,CAAC;AAAA;AAAA;AACF;AAAA,GACD,EACD,CAAA;AAEF","file":"FlexLayout.js","sourcesContent":["import {\n\tChildren,\n\tcloneElement,\n\tFragment,\n\tisValidElement,\n\tReactElement,\n\tReactNode,\n} from \"react\";\nimport { ContainerOpenCloseProvider } from \"../providers/FlexLayoutHooks\";\nimport styles from \"../styles/FlexLayout.module.css\";\nimport {\n\tFlexContainerProps,\n\tFlexLayoutChildrenType,\n\tFlexLayoutProps,\n} from \"../types/FlexLayoutTypes\";\n\nimport { FlexLayoutProvider } from \"../providers/FlexLayoutContext\";\n\nconst withFlexLayout =\n\t(\n\t\tlayoutName: string,\n\t\tfitContent: \"width\" \| \"height\",\n\t\tcontainerCount: number,\n\t) =>\n\t(WrappedComponent: ReactElement<FlexLayoutChildrenType>) => {\n\t\tif (\n\t\t\tWrappedComponent.type === Fragment \|\|\n\t\t\tWrappedComponent.type === \"div\" \|\|\n\t\t\tWrappedComponent.type === \"span\"\n\t\t) {\n\t\t\treturn WrappedComponent; // Fragment는 수정 없이 반환\n\t\t}\n\t\treturn cloneElement(WrappedComponent, {\n\t\t\tlayoutName,\n\t\t\tfitContent,\n\t\t\tcontainerCount,\n\t\t} as Partial<FlexContainerProps>);\n\t};\n\nexport default function FlexLayout({\n\tlayoutName,\n\tdirection,\n\tchildren,\n\tref,\n\tclassName,\n\tpanelClassName,\n\tpanelMovementMode = \"divorce\",\n\t...props\n}: FlexLayoutProps) {\n\tconst containerCount = Children.count(children);\n\tconst fitContent = direction === \"row\" ? \"width\" : \"height\";\n\t// Flatten children and unwrap Fragments\n\ttype FragmentElement = ReactElement<\n\t\t{ children?: ReactNode },\n\t\ttypeof Fragment\n\t>;\n\tconst isFragmentElement = (node: ReactNode): node is FragmentElement =>\n\t\tisValidElement(node) && node.type === Fragment;\n\n\t// ...\n\n\t// Flatten children and unwrap Fragments (타입 안전)\n\tconst nodes = Children.toArray(children).flatMap((node) =>\n\t\tisFragmentElement(node)\n\t\t\t? Children.toArray(node.props.children)\n\t\t\t: [node],\n\t);\n\n\t// 엘리먼트만 남기고, props 타입을 FlexLayoutChildrenType으로 고정\n\tconst flattenedChildren = nodes.filter(\n\t\tisValidElement,\n\t) as ReactElement<FlexLayoutChildrenType>[];\n\n\tif (flattenedChildren.length === 0) {\n\t\treturn null;\n\t}\n\t//if (!childrenTemplate) return null;\n\treturn (\n\t\t<>\n\t\t\t<FlexLayoutProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tlayoutName,\n\t\t\t\t\tdirection,\n\t\t\t\t\tpanelMovementMode,\n\t\t\t\t\tpanelClassName,\n\t\t\t\t\tcontainerCount,\n\t\t\t\t\tfitContent,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles[\"flex-layout\"]} ${className && className !== \"\" ? className : \"\"}`}\n\t\t\t\t\t{...(ref ? { ref } : {})}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdata-layout_name={layoutName}\n\t\t\t\t\tdata-direction={direction}\n\t\t\t\t>\n\t\t\t\t\t{flattenedChildren.map((child, index) => {\n\t\t\t\t\t\tif (!child \|\| !isValidElement(child)) return null;\n\t\t\t\t\t\t//const key = child.key \|\| `flex-child-${index}`;\n\t\t\t\t\t\t// const wrappedChild = withFlexLayout(\n\t\t\t\t\t\t// layoutName,\n\t\t\t\t\t\t// fitContent,\n\t\t\t\t\t\t// containerCount\n\t\t\t\t\t\t// )(child);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t\t{/wrappedChild/}\n\t\t\t\t\t\t\t\t{/<FlexLayoutContainer\n {...containerProps}\n fitContent={fitContent}\n containerCount={\n (children && children.length) \|\| 0\n }\n layoutName={props.layoutName}\n >\n {child}\n </FlexLayoutContainer>/}\n\t\t\t\t\t\t\t\t{/* 클라이언트 사이드에서만 리사이즈 패널 처리 */}\n\t\t\t\t\t\t\t\t<ContainerOpenCloseProvider\n\t\t\t\t\t\t\t\t\tlayoutName={layoutName}\n\t\t\t\t\t\t\t\t\tcontainerName={child.props.containerName}\n\t\t\t\t\t\t\t\t\tsizeName={fitContent}\n\t\t\t\t\t\t\t\t></ContainerOpenCloseProvider>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</FlexLayoutProvider>\n\t\t</>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayout.tsx"],"sourcesContent":["\"use client\";\nimport {\n\tChildren,\n\tcloneElement,\n\tFragment,\n\tisValidElement,\n\tReactElement,\n\tReactNode,\n} from \"react\";\nimport { ContainerOpenCloseProvider } from \"../providers/FlexLayoutHooks\";\nimport styles from \"../styles/FlexLayout.module.css\";\nimport {\n\tFlexContainerProps,\n\tFlexLayoutChildrenType,\n\tFlexLayoutProps,\n} from \"../types/FlexLayoutTypes\";\n\nimport { FlexLayoutProvider } from \"../providers/FlexLayoutContext\";\n\nconst withFlexLayout =\n\t(\n\t\tlayoutName: string,\n\t\tfitContent: \"width\" \| \"height\",\n\t\tcontainerCount: number,\n\t) =>\n\t(WrappedComponent: ReactElement<FlexLayoutChildrenType>) => {\n\t\tif (\n\t\t\tWrappedComponent.type === Fragment \|\|\n\t\t\tWrappedComponent.type === \"div\" \|\|\n\t\t\tWrappedComponent.type === \"span\"\n\t\t) {\n\t\t\treturn WrappedComponent; // Fragment는 수정 없이 반환\n\t\t}\n\t\treturn cloneElement(WrappedComponent, {\n\t\t\tlayoutName,\n\t\t\tfitContent,\n\t\t\tcontainerCount,\n\t\t} as Partial<FlexContainerProps>);\n\t};\n\nexport default function FlexLayout({\n\tlayoutName,\n\tdirection,\n\tchildren,\n\tref,\n\tclassName,\n\tpanelClassName,\n\tpanelMovementMode = \"divorce\",\n\t...props\n}: FlexLayoutProps) {\n\tconst containerCount = Children.count(children);\n\tconst fitContent = direction === \"row\" ? \"width\" : \"height\";\n\t// Flatten children and unwrap Fragments\n\ttype FragmentElement = ReactElement<\n\t\t{ children?: ReactNode },\n\t\ttypeof Fragment\n\t>;\n\tconst isFragmentElement = (node: ReactNode): node is FragmentElement =>\n\t\tisValidElement(node) && node.type === Fragment;\n\n\t// ...\n\n\t// Flatten children and unwrap Fragments (타입 안전)\n\tconst nodes = Children.toArray(children).flatMap((node) =>\n\t\tisFragmentElement(node)\n\t\t\t? Children.toArray(node.props.children)\n\t\t\t: [node],\n\t);\n\n\t// 엘리먼트만 남기고, props 타입을 FlexLayoutChildrenType으로 고정\n\tconst flattenedChildren = nodes.filter(\n\t\tisValidElement,\n\t) as ReactElement<FlexLayoutChildrenType>[];\n\n\tif (flattenedChildren.length === 0) {\n\t\treturn null;\n\t}\n\t//if (!childrenTemplate) return null;\n\treturn (\n\t\t<>\n\t\t\t<FlexLayoutProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tlayoutName,\n\t\t\t\t\tdirection,\n\t\t\t\t\tpanelMovementMode,\n\t\t\t\t\tpanelClassName,\n\t\t\t\t\tcontainerCount,\n\t\t\t\t\tfitContent,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles[\"flex-layout\"]} ${className && className !== \"\" ? className : \"\"}`}\n\t\t\t\t\t{...(ref ? { ref } : {})}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdata-layout_name={layoutName}\n\t\t\t\t\tdata-direction={direction}\n\t\t\t\t>\n\t\t\t\t\t{flattenedChildren.map((child, index) => {\n\t\t\t\t\t\tif (!child \|\| !isValidElement(child)) return null;\n\t\t\t\t\t\t//const key = child.key \|\| `flex-child-${index}`;\n\t\t\t\t\t\t// const wrappedChild = withFlexLayout(\n\t\t\t\t\t\t// layoutName,\n\t\t\t\t\t\t// fitContent,\n\t\t\t\t\t\t// containerCount\n\t\t\t\t\t\t// )(child);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t\t{/wrappedChild/}\n\t\t\t\t\t\t\t\t{/<FlexLayoutContainer\n {...containerProps}\n fitContent={fitContent}\n containerCount={\n (children && children.length) \|\| 0\n }\n layoutName={props.layoutName}\n >\n {child}\n </FlexLayoutContainer>/}\n\t\t\t\t\t\t\t\t{/* 클라이언트 사이드에서만 리사이즈 패널 처리 */}\n\t\t\t\t\t\t\t\t<ContainerOpenCloseProvider\n\t\t\t\t\t\t\t\t\tlayoutName={layoutName}\n\t\t\t\t\t\t\t\t\tcontainerName={child.props.containerName}\n\t\t\t\t\t\t\t\t\tsizeName={fitContent}\n\t\t\t\t\t\t\t\t></ContainerOpenCloseProvider>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</FlexLayoutProvider>\n\t\t</>\n\t);\n}\n"],"mappings":";AA+EE,mBAyCM,KAdD,YA3BL;AA9EF;AAAA,EACC;AAAA,EACA;AAAA,EACA,YAAAA;AAAA,EACA;AAAA,OAGM;AACP,SAAS,kCAAkC;AAC3C,OAAO,YAAY;AAOnB,SAAS,0BAA0B;AAEnC,MAAM,iBACL,CACC,YACA,YACA,mBAED,CAAC,qBAA2D;AAC3D,MACC,iBAAiB,SAASA,aAC1B,iBAAiB,SAAS,SAC1B,iBAAiB,SAAS,QACzB;AACD,WAAO;AAAA,EACR;AACA,SAAO,aAAa,kBAAkB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAgC;AACjC;AAEc,SAAR,WAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACJ,GAAoB;AACnB,QAAM,iBAAiB,SAAS,MAAM,QAAQ;AAC9C,QAAM,aAAa,cAAc,QAAQ,UAAU;AAMnD,QAAM,oBAAoB,CAAC,SAC1B,eAAe,IAAI,KAAK,KAAK,SAASA;AAKvC,QAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAAQ,CAAC,SACjD,kBAAkB,IAAI,IACnB,SAAS,QAAQ,KAAK,MAAM,QAAQ,IACpC,CAAC,IAAI;AAAA,EACT;AAGA,QAAM,oBAAoB,MAAM;AAAA,IAC/B;AAAA,EACD;AAEA,MAAI,kBAAkB,WAAW,GAAG;AACnC,WAAO;AAAA,EACR;AAEA,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,OAAO,aAAa,CAAC,IAAI,aAAa,cAAc,KAAK,YAAY,EAAE;AAAA,UACpF,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC;AAAA,UACrB,GAAG;AAAA,UACJ,oBAAkB;AAAA,UAClB,kBAAgB;AAAA,UAEf,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACxC,gBAAI,CAAC,SAAS,CAAC,eAAe,KAAK,EAAG,QAAO;AAO7C,mBACC,qBAACA,WAAA,EACC;AAAA;AAAA,cAaD;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,eAAe,MAAM,MAAM;AAAA,kBAC3B,UAAU;AAAA;AAAA,cACV;AAAA,iBAlBa,KAmBf;AAAA,UAEF,CAAC;AAAA;AAAA,MACF;AAAA;AAAA,EACD,GACD;AAEF;","names":["Fragment"]}

package/dist/flex-layout/components/FlexLayoutContainer.cjs CHANGED Viewed

@@ -1,19 +1,45 @@
-'use strict';
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var useSizes = require('../hooks/useSizes');
-var FlexLayoutContext = require('../providers/FlexLayoutContext');
-var FlexLayoutContainerStore = require('../store/FlexLayoutContainerStore');
-var styles = require('../styles/FlexLayout.module.css');
-var FlexLayoutUtils = require('../utils/FlexLayoutUtils');
-var FlexLayoutResizePanel = require('./FlexLayoutResizePanel');
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-var FlexLayoutResizePanel__default = /*#__PURE__*/_interopDefault(FlexLayoutResizePanel);
+"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 FlexLayoutContainer_exports = {};
+__export(FlexLayoutContainer_exports, {
+  default: () => FlexLayoutContainer
+});
+module.exports = __toCommonJS(FlexLayoutContainer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_useSizes = require("../hooks/useSizes");
+var import_FlexLayoutContext = require("../providers/FlexLayoutContext");
+var import_FlexLayoutContainerStore = require("../store/FlexLayoutContainerStore");
+var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
+var import_FlexLayoutUtils = require("../utils/FlexLayoutUtils");
+var import_FlexLayoutResizePanel = __toESM(require("./FlexLayoutResizePanel"), 1);
 function FlexLayoutContainer({
   isFitContent,
   isFitResize,
@@ -36,40 +62,41 @@ function FlexLayoutContainer({
     layoutName,
     fitContent,
     containerCount
-  } = FlexLayoutContext.useFlexLayoutContext();
+  } = (0, import_FlexLayoutContext.useFlexLayoutContext)();
   const { ref, size } = (
     // isFitContent && fitContent
     //?
-    useSizes.useSize(fitContent)
+    (0, import_useSizes.useSize)(fitContent)
   );
-  const flexContainerNodeRef = react.useRef(null);
-  const flexContainerRef = react.useCallback(
+  const flexContainerNodeRef = (0, import_react.useRef)(null);
+  const isUserResizingRef = (0, import_react.useRef)(false);
+  const handleResizingChange = (0, import_react.useCallback)((v) => {
+    isUserResizingRef.current = v;
+  }, []);
+  const flexContainerRef = (0, import_react.useCallback)(
     (node) => {
       flexContainerNodeRef.current = node;
-      if (node !== null) {
-        FlexLayoutContainerStore.setContainerRef(layoutName, containerName, { current: node });
+      if (node) {
+        (0, import_FlexLayoutContainerStore.setContainerRef)(
+          layoutName,
+          containerName,
+          flexContainerNodeRef
+        );
+      } else {
+        (0, import_FlexLayoutContainerStore.setContainerRef)(layoutName, containerName, null);
       }
     },
     [layoutName, containerName]
   );
-  const [growState, setGrowState] = react.useState(initialGrow);
-  react.useEffect(() => {
+  const [growState, setGrowState] = (0, import_react.useState)(initialGrow);
+  (0, import_react.useEffect)(() => {
     setGrowState(initialGrow);
   }, [initialGrow]);
-  const [prevGrowState, setPrevGrowState] = react.useState(
+  const [prevGrowState, setPrevGrowState] = (0, import_react.useState)(
     initialPrevGrow
   );
-  const [isFirstLoad, setIsFirstLoad] = react.useState(true);
-  react.useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    FlexLayoutContainerStore.setContainerRef(layoutName, containerName, flexContainerNodeRef);
-    return () => {
-      FlexLayoutContainerStore.setContainerRef(layoutName, containerName, {
-        current: null
-      });
-    };
-  }, [containerName, layoutName]);
-  react.useEffect(() => {
+  const [isFirstLoad, setIsFirstLoad] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
     if (typeof window == "undefined" || flexContainerNodeRef.current === null)
       return;
     const storedGrow = sessionStorage.getItem(containerName);
@@ -81,7 +108,7 @@ function FlexLayoutContainer({
       }
     }
   }, [containerName]);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!flexContainerNodeRef.current) return;
     const targetNode = flexContainerNodeRef.current;
     const observer = new MutationObserver((mutations) => {
@@ -104,8 +131,9 @@ function FlexLayoutContainer({
       observer.disconnect();
     };
   }, [containerName]);
-  react.useEffect(() => {
-    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent)
+  (0, import_react.useEffect)(() => {
+    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent || // getGrow(flexContainerNodeRef.current) == 0 ||
+    isUserResizingRef.current)
       return;
     requestAnimationFrame(() => {
       if (!flexContainerNodeRef.current) return;
@@ -118,14 +146,14 @@ function FlexLayoutContainer({
         setIsFirstLoad(false);
         return;
       }
-      if (FlexLayoutUtils.getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {
-        const newGrow = FlexLayoutUtils.mathGrow(size, parentSize, containerCount);
+      if ((0, import_FlexLayoutUtils.getGrow)(flexContainerNodeRef.current) != 0 && isFitResize) {
+        const newGrow = (0, import_FlexLayoutUtils.mathGrow)(size, parentSize, containerCount);
         setPrevGrowState(growState);
         setGrowState(newGrow);
       }
     });
   }, [size, containerCount, isFitResize, children]);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!flexContainerNodeRef.current) return;
     let notGrowList = [];
     let containerList = [
@@ -133,7 +161,7 @@ function FlexLayoutContainer({
     ].filter((e) => e.hasAttribute("data-container_name"));
     let remainingGrow = containerList.reduce((t, e, i) => {
       let item = e;
-      if (item.classList.contains(styles__default.default["flex-resize-panel"])) return t;
+      if (item.classList.contains(import_FlexLayout.default["flex-resize-panel"])) return t;
       if (e.hasAttribute("data-grow") == false || e.getAttribute("data-is_resize") === "true") {
         notGrowList.push(item);
         return t;
@@ -144,21 +172,61 @@ function FlexLayoutContainer({
       return t;
     }, containerList.length);
     if (notGrowList.length != 0) {
-      let resizeWeight = FlexLayoutUtils.mathWeight(notGrowList.length, remainingGrow);
+      let resizeWeight = (0, import_FlexLayoutUtils.mathWeight)(notGrowList.length, remainingGrow);
       notGrowList.forEach((e) => {
         e.dataset.grow = resizeWeight.toString();
         e.style.flex = `${resizeWeight} 1 0%`;
       });
     }
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  (0, import_react.useEffect)(() => {
+    if (!flexContainerNodeRef.current || !isFitContent || !fitContent || !size || (0, import_FlexLayoutUtils.getGrow)(flexContainerNodeRef.current) == 0)
+      return;
+    const parent = flexContainerNodeRef.current.parentElement;
+    if (!parent) return;
+    const sizeName = fitContent.charAt(0).toUpperCase() + fitContent.substring(1);
+    const parentSize = parent["client" + sizeName] || 0;
+    if (!parentSize || containerCount <= 0) return;
+    const nextGrowRaw = (0, import_FlexLayoutUtils.mathGrow)(size, parentSize, containerCount);
+    const nextGrow = Math.min(containerCount, Math.max(0, nextGrowRaw));
+    const currentGrow = (0, import_FlexLayoutUtils.getGrow)(flexContainerNodeRef.current);
+    if (Math.abs(nextGrow - currentGrow) < 1e-3) return;
+    setPrevGrowState(currentGrow);
+    setGrowState(nextGrow);
+    const containers = [...parent.children || []].filter((el) => {
+      const item = el;
+      return item.hasAttribute("data-container_name") && !item.classList.contains(import_FlexLayout.default["flex-resize-panel"]);
+    });
+    const siblings = containers.filter(
+      (el) => el !== flexContainerNodeRef.current
+    );
+    const adjustable = siblings.filter((el) => el.style.flex !== "0 1 0%");
+    const remaining = containerCount - nextGrow;
+    if (remaining <= 0 || adjustable.length === 0) return;
+    const oldSum = adjustable.reduce((sum, el) => sum + (0, import_FlexLayoutUtils.getGrow)(el), 0);
+    if (oldSum <= 0) {
+      const each = remaining / adjustable.length;
+      adjustable.forEach((el) => {
+        el.dataset.grow = each.toString();
+        el.style.flex = `${each} 1 0%`;
+      });
+    } else {
+      adjustable.forEach((el) => {
+        const g = (0, import_FlexLayoutUtils.getGrow)(el);
+        const scaled = remaining * (g / oldSum);
+        el.dataset.grow = scaled.toString();
+        el.style.flex = `${scaled} 1 0%`;
+      });
+    }
+  }, [size, isFitContent, fitContent, containerCount]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         id: containerName,
         "data-container_name": containerName,
         ref: flexContainerRef,
-        className: `${styles__default.default["flex-container"]} ${className && className !== "" ? className : ""}`,
+        className: `${import_FlexLayout.default["flex-container"]} ${className && className !== "" ? className : ""}`,
         ...growState !== void 0 ? { ["data-grow"]: growState } : {},
         ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
         "data-is_resize": isInitialResizable,
@@ -166,18 +234,18 @@ function FlexLayoutContainer({
         style: growState !== void 0 && {
           flex: `${growState} 1 0%`
         } || {},
-        children: isFitContent && /* @__PURE__ */ jsxRuntime.jsx(
+        children: isFitContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            className: `${styles__default.default["flex-content-fit-wrapper"]}`,
+            className: `${import_FlexLayout.default["flex-content-fit-wrapper"]}`,
             ref,
             children
           }
         ) || children
       }
     ),
-    isResizePanel && /* @__PURE__ */ jsxRuntime.jsx(
-      FlexLayoutResizePanel__default.default,
+    isResizePanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_FlexLayoutResizePanel.default,
       {
         containerName,
         layoutName,
@@ -185,12 +253,10 @@ function FlexLayoutContainer({
         containerCount,
         panelMode,
         panelClassName,
-        panelMovementMode
+        panelMovementMode,
+        onResizingChange: handleResizingChange
       }
     )
   ] });
 }
-module.exports = FlexLayoutContainer;
-//# sourceMappingURL=FlexLayoutContainer.cjs.map
 //# sourceMappingURL=FlexLayoutContainer.cjs.map

package/dist/flex-layout/components/FlexLayoutContainer.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"names":["useFlexLayoutContext","useSize","useRef","useCallback","setContainerRef","useState","useEffect","getGrow","mathGrow","styles","mathWeight","jsxs","Fragment","jsx","FlexLayoutResizePanel"],"mappings":"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","file":"FlexLayoutContainer.cjs","sourcesContent":["\"use client\";\r\nimport { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport { useSize } from \"../hooks/useSizes\";\r\nimport { useFlexLayoutContext } from \"../providers/FlexLayoutContext\";\r\nimport { setContainerRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexContainerProps } from \"../types/FlexLayoutTypes\";\r\nimport { getGrow, mathGrow, mathWeight } from \"../utils/FlexLayoutUtils\";\r\nimport FlexLayoutResizePanel from \"./FlexLayoutResizePanel\";\r\n\r\nexport default function FlexLayoutContainer({\r\n\tisFitContent,\r\n\tisFitResize,\r\n\t// fitContent,\r\n\t// containerCount,\r\n\t// layoutName,\r\n\tcontainerName,\r\n\tgrow: initialGrow,\r\n\tprevGrow: initialPrevGrow,\r\n\tisInitialResizable,\r\n\tisResizePanel,\r\n\tchildren,\r\n\tclassName,\r\n\tpanelMode,\r\n}: FlexContainerProps) {\r\n\tconst {\r\n\t\tdirection,\r\n\t\tpanelMovementMode,\r\n\t\tpanelClassName,\r\n\t\tlayoutName,\r\n\t\tfitContent,\r\n\t\tcontainerCount,\r\n\t} = useFlexLayoutContext();\r\n\r\n\tconst { ref, size } =\r\n\t\t// isFitContent && fitContent\r\n\t\t//?\r\n\t\tuseSize(fitContent);\r\n\t//: { ref: null, size: null };\r\n\t// 콜백 ref에서 접근하기 위한 내부 ref 생성\r\n\tconst flexContainerNodeRef = useRef<HTMLDivElement \| null>(null);\r\n\r\n\t// 콜백 ref 정의\r\n\tconst flexContainerRef = useCallback(\r\n\t\t(node: HTMLDivElement \| null) => {\r\n\t\t\tflexContainerNodeRef.current = node;\r\n\t\t\tif (node !== null) {\r\n\t\t\t\tsetContainerRef(layoutName, containerName, { current: node });\r\n\t\t\t} else {\r\n\t\t\t\t// 컴포넌트가 언마운트될 때 필요한 작업이 있다면 여기에 추가\r\n\t\t\t}\r\n\t\t},\r\n\t\t[layoutName, containerName],\r\n\t);\r\n\r\n\t// 초기 SSR 시점에는 sessionStorage를 사용할 수 없으므로 일단 initialGrow를 사용\r\n\tconst [growState, setGrowState] = useState<number \| undefined>(initialGrow);\r\n\tuseEffect(() => {\r\n\t\tsetGrowState(initialGrow);\r\n\t}, [initialGrow]);\r\n\tconst [prevGrowState, setPrevGrowState] = useState<number \| undefined>(\r\n\t\tinitialPrevGrow,\r\n\t);\r\n\tconst [isFirstLoad, setIsFirstLoad] = useState<boolean>(true);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tsetContainerRef(layoutName, containerName, flexContainerNodeRef);\r\n\t\treturn () => {\r\n\t\t\tsetContainerRef(layoutName, containerName, {\r\n\t\t\t\tcurrent: null,\r\n\t\t\t} as any);\r\n\t\t};\r\n\t}, [containerName, layoutName]);\r\n\r\n\t// 클라이언트 마운트 후 sessionStorage에서 grow값을 가져와 state 업데이트 (SSR/Hydration 안정화)\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\ttypeof window == \"undefined\" \|\|\r\n\t\t\tflexContainerNodeRef.current === null\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst storedGrow = sessionStorage.getItem(containerName);\r\n\t\tif (storedGrow !== null) {\r\n\t\t\tconst parsed = parseFloat(storedGrow);\r\n\t\t\tif (!isNaN(parsed)) {\r\n\t\t\t\tflexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;\r\n\t\t\t\tsetGrowState(parsed);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [containerName]);\r\n\r\n\t// 스타일 변경 감지를 위한 MutationObserver\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tconst targetNode = flexContainerNodeRef.current;\r\n\r\n\t\tconst observer = new MutationObserver((mutations) => {\r\n\t\t\tfor (const mutation of mutations) {\r\n\t\t\t\tif (\r\n\t\t\t\t\tmutation.type === \"attributes\" &&\r\n\t\t\t\t\tmutation.attributeName === \"style\" &&\r\n\t\t\t\t\ttargetNode.style.flex\r\n\t\t\t\t) {\r\n\t\t\t\t\t// style.flex = \"X 1 0%\" 형태이므로 X를 파싱\r\n\t\t\t\t\tconst flexValue = targetNode.style.flex;\r\n\t\t\t\t\tconst parsedGrow = parseFloat(flexValue.split(\" \")[0]);\r\n\t\t\t\t\tif (!isNaN(parsedGrow)) {\r\n\t\t\t\t\t\t// sessionStorage에 저장\r\n\t\t\t\t\t\t// sessionStorage.setItem(\r\n\t\t\t\t\t\t// containerName,\r\n\t\t\t\t\t\t// parsedGrow.toString()\r\n\t\t\t\t\t\t// );\r\n\t\t\t\t\t\t// state 업데이트\r\n\t\t\t\t\t\tsetGrowState(parsedGrow);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tobserver.observe(targetNode, {\r\n\t\t\tattributes: true,\r\n\t\t\tattributeFilter: [\"style\"],\r\n\t\t\tattributeOldValue: true,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tobserver.disconnect();\r\n\t\t};\r\n\t}, [containerName]);\r\n\r\n\tuseEffect(() => {\r\n\t\t// 컴포넌트 크기 및 설정값에 따른 사이즈 재조정\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current \|\|\r\n\t\t\t!ref \|\|\r\n\t\t\t!ref.current \|\|\r\n\t\t\t!size \|\|\r\n\t\t\t!fitContent\r\n\t\t\t//\|\|getGrow(flexContainerRef.current) == 0\r\n\t\t)\r\n\t\t\treturn;\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tif (!flexContainerNodeRef.current) return;\r\n\t\t\tconst sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;\r\n\t\t\tconst parentSize =\r\n\t\t\t\t(flexContainerNodeRef.current.parentElement &&\r\n\t\t\t\t\tflexContainerNodeRef.current.parentElement[\r\n\t\t\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" \| \"clientHeight\"\r\n\t\t\t\t\t]) \|\|\r\n\t\t\t\t0;\r\n\t\t\tif (isFitContent) {\r\n\t\t\t\tflexContainerNodeRef.current.style[\r\n\t\t\t\t\t(\"max\" + sizeName) as \"maxWidth\" \| \"maxHeight\"\r\n\t\t\t\t] = size + \"px\";\r\n\t\t\t}\r\n\t\t\tif (!isFitResize && isFirstLoad) {\r\n\t\t\t\tsetIsFirstLoad(false);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {\r\n\t\t\t\tconst newGrow = mathGrow(size, parentSize, containerCount);\r\n\t\t\t\tsetPrevGrowState(growState);\r\n\t\t\t\tsetGrowState(newGrow);\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.prev_grow =\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow;\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow = newGrow.toString();\r\n\t\t\t\t// flexContainerNodeRef.current.style.flex = `${newGrow} 1 0%`;\r\n\t\t\t}\r\n\t\t});\r\n\t}, [size, containerCount, isFitResize, children]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\r\n\t\tlet notGrowList: Array<HTMLElement> = [];\r\n\t\tlet containerList = [\r\n\t\t\t...(flexContainerNodeRef.current.parentElement?.children \|\| []),\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\"));\r\n\t\tlet remainingGrow = containerList.reduce((t, e, i) => {\r\n\t\t\tlet item = e as HTMLElement;\r\n\r\n\t\t\tif (item.classList.contains(styles[\"flex-resize-panel\"])) return t;\r\n\r\n\t\t\tif (\r\n\t\t\t\te.hasAttribute(\"data-grow\") == false \|\|\r\n\t\t\t\te.getAttribute(\"data-is_resize\") === \"true\"\r\n\t\t\t) {\r\n\t\t\t\tnotGrowList.push(item);\r\n\t\t\t\treturn t;\r\n\t\t\t}\r\n\t\t\tlet grow = parseFloat(item.dataset.grow \|\| \"\");\r\n\t\t\titem.style.flex = `${grow} 1 0%`;\r\n\t\t\tt -= grow;\r\n\t\t\treturn t;\r\n\t\t}, containerList.length);\r\n\t\tif (notGrowList.length != 0) {\r\n\t\t\tlet resizeWeight = mathWeight(notGrowList.length, remainingGrow);\r\n\t\t\tnotGrowList.forEach((e) => {\r\n\t\t\t\te.dataset.grow = resizeWeight.toString();\r\n\t\t\t\te.style.flex = `${resizeWeight} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, []);\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div\r\n\t\t\t\tid={containerName}\r\n\t\t\t\tdata-container_name={containerName}\r\n\t\t\t\tref={flexContainerRef}\r\n\t\t\t\tclassName={`${styles[\"flex-container\"]} ${className && className !== \"\" ? className : \"\"}`}\r\n\t\t\t\t{...(growState !== undefined\r\n\t\t\t\t\t? { [\"data-grow\"]: growState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\t{...(prevGrowState != undefined\r\n\t\t\t\t\t? { [\"data-prev_grow\"]: prevGrowState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\tdata-is_resize={isInitialResizable}\r\n\t\t\t\tdata-is_resize_panel={isResizePanel}\r\n\t\t\t\tstyle={\r\n\t\t\t\t\t(growState !== undefined && {\r\n\t\t\t\t\t\tflex: `${growState} 1 0%`,\r\n\t\t\t\t\t}) \|\|\r\n\t\t\t\t\t{}\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t{(isFitContent && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`${styles[\"flex-content-fit-wrapper\"]}`}\r\n\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)) \|\|\r\n\t\t\t\t\tchildren}\r\n\t\t\t</div>\r\n\t\t\t{isResizePanel && (\r\n\t\t\t\t<FlexLayoutResizePanel\r\n\t\t\t\t\tcontainerName={containerName}\r\n\t\t\t\t\tlayoutName={layoutName}\r\n\t\t\t\t\tdirection={direction}\r\n\t\t\t\t\tcontainerCount={containerCount}\r\n\t\t\t\t\tpanelMode={panelMode}\r\n\t\t\t\t\tpanelClassName={panelClassName}\r\n\t\t\t\t\tpanelMovementMode={panelMovementMode}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n}\r\n"]}
1	+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"sourcesContent":["\"use client\";\r\nimport { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport { useSize } from \"../hooks/useSizes\";\r\nimport { useFlexLayoutContext } from \"../providers/FlexLayoutContext\";\r\nimport { setContainerRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexContainerProps } from \"../types/FlexLayoutTypes\";\r\nimport { getGrow, mathGrow, mathWeight } from \"../utils/FlexLayoutUtils\";\r\nimport FlexLayoutResizePanel from \"./FlexLayoutResizePanel\";\r\n\r\nexport default function FlexLayoutContainer({\r\n\tisFitContent,\r\n\tisFitResize,\r\n\t// fitContent,\r\n\t// containerCount,\r\n\t// layoutName,\r\n\tcontainerName,\r\n\tgrow: initialGrow,\r\n\tprevGrow: initialPrevGrow,\r\n\tisInitialResizable,\r\n\tisResizePanel,\r\n\tchildren,\r\n\tclassName,\r\n\tpanelMode,\r\n}: FlexContainerProps) {\r\n\tconst {\r\n\t\tdirection,\r\n\t\tpanelMovementMode,\r\n\t\tpanelClassName,\r\n\t\tlayoutName,\r\n\t\tfitContent,\r\n\t\tcontainerCount,\r\n\t} = useFlexLayoutContext();\r\n\r\n\tconst { ref, size } =\r\n\t\t// isFitContent && fitContent\r\n\t\t//?\r\n\t\tuseSize(fitContent);\r\n\t//: { ref: null, size: null };\r\n\t// 콜백 ref에서 접근하기 위한 내부 ref 생성\r\n\tconst flexContainerNodeRef = useRef<HTMLDivElement \| null>(null);\r\n\r\n\tconst isUserResizingRef = useRef(false);\r\n\r\n\tconst handleResizingChange = useCallback((v: boolean) => {\r\n\t\tisUserResizingRef.current = v;\r\n\t}, []);\r\n\r\n\t// 콜백 ref 정의\r\n\tconst flexContainerRef = useCallback(\r\n\t\t(node: HTMLDivElement \| null) => {\r\n\t\t\tflexContainerNodeRef.current = node;\r\n\r\n\t\t\t// 마운트: 저장 / 언마운트: 삭제\r\n\t\t\tif (node) {\r\n\t\t\t\tsetContainerRef(\r\n\t\t\t\t\tlayoutName,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tflexContainerNodeRef,\r\n\t\t\t\t);\r\n\t\t\t} else {\r\n\t\t\t\tsetContainerRef(layoutName, containerName, null);\r\n\t\t\t}\r\n\t\t},\r\n\t\t[layoutName, containerName],\r\n\t);\r\n\r\n\t// 초기 SSR 시점에는 sessionStorage를 사용할 수 없으므로 일단 initialGrow를 사용\r\n\tconst [growState, setGrowState] = useState<number \| undefined>(initialGrow);\r\n\tuseEffect(() => {\r\n\t\tsetGrowState(initialGrow);\r\n\t}, [initialGrow]);\r\n\tconst [prevGrowState, setPrevGrowState] = useState<number \| undefined>(\r\n\t\tinitialPrevGrow,\r\n\t);\r\n\tconst [isFirstLoad, setIsFirstLoad] = useState<boolean>(true);\r\n\r\n\t// 클라이언트 마운트 후 sessionStorage에서 grow값을 가져와 state 업데이트 (SSR/Hydration 안정화)\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\ttypeof window == \"undefined\" \|\|\r\n\t\t\tflexContainerNodeRef.current === null\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst storedGrow = sessionStorage.getItem(containerName);\r\n\t\tif (storedGrow !== null) {\r\n\t\t\tconst parsed = parseFloat(storedGrow);\r\n\t\t\tif (!isNaN(parsed)) {\r\n\t\t\t\tflexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;\r\n\t\t\t\tsetGrowState(parsed);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [containerName]);\r\n\r\n\t// 스타일 변경 감지를 위한 MutationObserver\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tconst targetNode = flexContainerNodeRef.current;\r\n\r\n\t\tconst observer = new MutationObserver((mutations) => {\r\n\t\t\tfor (const mutation of mutations) {\r\n\t\t\t\tif (\r\n\t\t\t\t\tmutation.type === \"attributes\" &&\r\n\t\t\t\t\tmutation.attributeName === \"style\" &&\r\n\t\t\t\t\ttargetNode.style.flex\r\n\t\t\t\t) {\r\n\t\t\t\t\t// style.flex = \"X 1 0%\" 형태이므로 X를 파싱\r\n\t\t\t\t\tconst flexValue = targetNode.style.flex;\r\n\t\t\t\t\tconst parsedGrow = parseFloat(flexValue.split(\" \")[0]);\r\n\t\t\t\t\tif (!isNaN(parsedGrow)) {\r\n\t\t\t\t\t\t// sessionStorage에 저장\r\n\t\t\t\t\t\t// sessionStorage.setItem(\r\n\t\t\t\t\t\t// containerName,\r\n\t\t\t\t\t\t// parsedGrow.toString()\r\n\t\t\t\t\t\t// );\r\n\t\t\t\t\t\t// state 업데이트\r\n\t\t\t\t\t\tsetGrowState(parsedGrow);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tobserver.observe(targetNode, {\r\n\t\t\tattributes: true,\r\n\t\t\tattributeFilter: [\"style\"],\r\n\t\t\tattributeOldValue: true,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tobserver.disconnect();\r\n\t\t};\r\n\t}, [containerName]);\r\n\r\n\tuseEffect(() => {\r\n\t\t// 컴포넌트 크기 및 설정값에 따른 사이즈 재조정\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current \|\|\r\n\t\t\t!ref \|\|\r\n\t\t\t!ref.current \|\|\r\n\t\t\t!size \|\|\r\n\t\t\t!fitContent \|\|\r\n\t\t\t// getGrow(flexContainerNodeRef.current) == 0 \|\|\r\n\t\t\tisUserResizingRef.current // 사용자가 직접 사이즈 조정 중일 때는 자동 조정 방지\r\n\t\t)\r\n\t\t\treturn;\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tif (!flexContainerNodeRef.current) return;\r\n\t\t\tconst sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;\r\n\t\t\tconst parentSize =\r\n\t\t\t\t(flexContainerNodeRef.current.parentElement &&\r\n\t\t\t\t\tflexContainerNodeRef.current.parentElement[\r\n\t\t\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" \| \"clientHeight\"\r\n\t\t\t\t\t]) \|\|\r\n\t\t\t\t0;\r\n\t\t\tif (isFitContent) {\r\n\t\t\t\tflexContainerNodeRef.current.style[\r\n\t\t\t\t\t(\"max\" + sizeName) as \"maxWidth\" \| \"maxHeight\"\r\n\t\t\t\t] = size + \"px\";\r\n\t\t\t}\r\n\t\t\tif (!isFitResize && isFirstLoad) {\r\n\t\t\t\tsetIsFirstLoad(false);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {\r\n\t\t\t\tconst newGrow = mathGrow(size, parentSize, containerCount);\r\n\t\t\t\tsetPrevGrowState(growState);\r\n\t\t\t\tsetGrowState(newGrow);\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.prev_grow =\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow;\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow = newGrow.toString();\r\n\t\t\t\t// flexContainerNodeRef.current.style.flex = `${newGrow} 1 0%`;\r\n\t\t\t}\r\n\t\t});\r\n\t}, [size, containerCount, isFitResize, children]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\r\n\t\tlet notGrowList: Array<HTMLElement> = [];\r\n\t\tlet containerList = [\r\n\t\t\t...(flexContainerNodeRef.current.parentElement?.children \|\| []),\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\"));\r\n\t\tlet remainingGrow = containerList.reduce((t, e, i) => {\r\n\t\t\tlet item = e as HTMLElement;\r\n\r\n\t\t\tif (item.classList.contains(styles[\"flex-resize-panel\"])) return t;\r\n\r\n\t\t\tif (\r\n\t\t\t\te.hasAttribute(\"data-grow\") == false \|\|\r\n\t\t\t\te.getAttribute(\"data-is_resize\") === \"true\"\r\n\t\t\t) {\r\n\t\t\t\tnotGrowList.push(item);\r\n\t\t\t\treturn t;\r\n\t\t\t}\r\n\t\t\tlet grow = parseFloat(item.dataset.grow \|\| \"\");\r\n\t\t\titem.style.flex = `${grow} 1 0%`;\r\n\t\t\tt -= grow;\r\n\t\t\treturn t;\r\n\t\t}, containerList.length);\r\n\t\tif (notGrowList.length != 0) {\r\n\t\t\tlet resizeWeight = mathWeight(notGrowList.length, remainingGrow);\r\n\t\t\tnotGrowList.forEach((e) => {\r\n\t\t\t\te.dataset.grow = resizeWeight.toString();\r\n\t\t\t\te.style.flex = `${resizeWeight} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current \|\|\r\n\t\t\t!isFitContent \|\|\r\n\t\t\t!fitContent \|\|\r\n\t\t\t!size \|\|\r\n\t\t\tgetGrow(flexContainerNodeRef.current) == 0\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst parent = flexContainerNodeRef.current.parentElement;\r\n\t\tif (!parent) return;\r\n\r\n\t\tconst sizeName =\r\n\t\t\tfitContent.charAt(0).toUpperCase() + fitContent.substring(1);\r\n\t\tconst parentSize =\r\n\t\t\t(parent[\r\n\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" \| \"clientHeight\"\r\n\t\t\t] as number) \|\| 0;\r\n\r\n\t\tif (!parentSize \|\| containerCount <= 0) return;\r\n\r\n\t\t// 내 grow 재계산 (0 ~ containerCount로 클램프)\r\n\t\tconst nextGrowRaw = mathGrow(size, parentSize, containerCount);\r\n\t\tconst nextGrow = Math.min(containerCount, Math.max(0, nextGrowRaw));\r\n\t\tconst currentGrow = getGrow(flexContainerNodeRef.current);\r\n\r\n\t\t// 미세 변화로 루프 도는 것 방지\r\n\t\tif (Math.abs(nextGrow - currentGrow) < 0.001) return;\r\n\r\n\t\tsetPrevGrowState(currentGrow);\r\n\t\tsetGrowState(nextGrow);\r\n\r\n\t\t// 형제 컨테이너 grow 재분배\r\n\t\tconst containers = [...(parent.children \|\| [])].filter((el) => {\r\n\t\t\tconst item = el as HTMLElement;\r\n\t\t\treturn (\r\n\t\t\t\titem.hasAttribute(\"data-container_name\") &&\r\n\t\t\t\t!item.classList.contains(styles[\"flex-resize-panel\"])\r\n\t\t\t);\r\n\t\t}) as HTMLElement[];\r\n\r\n\t\tconst siblings = containers.filter(\r\n\t\t\t(el) => el !== (flexContainerNodeRef.current as HTMLElement),\r\n\t\t);\r\n\r\n\t\t// 닫힌 컨테이너는 건드리지 않음\r\n\t\tconst adjustable = siblings.filter((el) => el.style.flex !== \"0 1 0%\");\r\n\r\n\t\tconst remaining = containerCount - nextGrow;\r\n\t\tif (remaining <= 0 \|\| adjustable.length === 0) return;\r\n\r\n\t\tconst oldSum = adjustable.reduce((sum, el) => sum + getGrow(el), 0);\r\n\r\n\t\tif (oldSum <= 0) {\r\n\t\t\t// 기존 grow 합이 0이면 균등분배\r\n\t\t\tconst each = remaining / adjustable.length;\r\n\t\t\tadjustable.forEach((el) => {\r\n\t\t\t\tel.dataset.grow = each.toString();\r\n\t\t\t\tel.style.flex = `${each} 1 0%`;\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\t// 기존 grow 비율대로 스케일링\r\n\t\t\tadjustable.forEach((el) => {\r\n\t\t\t\tconst g = getGrow(el);\r\n\t\t\t\tconst scaled = remaining * (g / oldSum);\r\n\t\t\t\tel.dataset.grow = scaled.toString();\r\n\t\t\t\tel.style.flex = `${scaled} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, [size, isFitContent, fitContent, containerCount]);\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div\r\n\t\t\t\tid={containerName}\r\n\t\t\t\tdata-container_name={containerName}\r\n\t\t\t\tref={flexContainerRef}\r\n\t\t\t\tclassName={`${styles[\"flex-container\"]} ${className && className !== \"\" ? className : \"\"}`}\r\n\t\t\t\t{...(growState !== undefined\r\n\t\t\t\t\t? { [\"data-grow\"]: growState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\t{...(prevGrowState != undefined\r\n\t\t\t\t\t? { [\"data-prev_grow\"]: prevGrowState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\tdata-is_resize={isInitialResizable}\r\n\t\t\t\tdata-is_resize_panel={isResizePanel}\r\n\t\t\t\tstyle={\r\n\t\t\t\t\t(growState !== undefined && {\r\n\t\t\t\t\t\tflex: `${growState} 1 0%`,\r\n\t\t\t\t\t}) \|\|\r\n\t\t\t\t\t{}\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t{(isFitContent && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`${styles[\"flex-content-fit-wrapper\"]}`}\r\n\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)) \|\|\r\n\t\t\t\t\tchildren}\r\n\t\t\t</div>\r\n\t\t\t{isResizePanel && (\r\n\t\t\t\t<FlexLayoutResizePanel\r\n\t\t\t\t\tcontainerName={containerName}\r\n\t\t\t\t\tlayoutName={layoutName}\r\n\t\t\t\t\tdirection={direction}\r\n\t\t\t\t\tcontainerCount={containerCount}\r\n\t\t\t\t\tpanelMode={panelMode}\r\n\t\t\t\t\tpanelClassName={panelClassName}\r\n\t\t\t\t\tpanelMovementMode={panelMovementMode}\r\n\t\t\t\t\tonResizingChange={handleResizingChange}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n}\r\n"],"mappings":"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","names":["styles","FlexLayoutResizePanel"]}