@byeolnaerim/flex-layout 0.0.6 → 0.0.8

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

@@ -0,0 +1,76 @@
+'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);
+
+function FlexLayout({
+  layoutName,
+  direction,
+  children,
+  ref,
+  className,
+  panelClassName,
+  panelMovementMode = "divorce",
+  ...props
+}) {
+  const containerCount = 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 flattenedChildren = nodes.filter(
+    react.isValidElement
+  );
+  if (flattenedChildren.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    FlexLayoutContext.FlexLayoutProvider,
+    {
+      value: {
+        layoutName,
+        direction,
+        panelMovementMode,
+        panelClassName,
+        containerCount,
+        fitContent
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `${styles__default.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: [
+              child,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FlexLayoutHooks.ContainerOpenCloseProvider,
+                {
+                  layoutName,
+                  containerName: child.props.containerName,
+                  sizeName: fitContent
+                }
+              )
+            ] }, index);
+          })
+        }
+      )
+    }
+  ) });
+}
+
+module.exports = FlexLayout;
+//# sourceMappingURL=FlexLayout.cjs.map
+//# sourceMappingURL=FlexLayout.cjs.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,70 @@
+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';
+
+function FlexLayout({
+  layoutName,
+  direction,
+  children,
+  ref,
+  className,
+  panelClassName,
+  panelMovementMode = "divorce",
+  ...props
+}) {
+  const containerCount = Children.count(children);
+  const fitContent = direction === "row" ? "width" : "height";
+  const isFragmentElement = (node) => isValidElement(node) && node.type === Fragment$1;
+  const nodes = Children.toArray(children).flatMap(
+    (node) => isFragmentElement(node) ? Children.toArray(node.props.children) : [node]
+  );
+  const flattenedChildren = nodes.filter(
+    isValidElement
+  );
+  if (flattenedChildren.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    FlexLayoutProvider,
+    {
+      value: {
+        layoutName,
+        direction,
+        panelMovementMode,
+        panelClassName,
+        containerCount,
+        fitContent
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${styles["flex-layout"]} ${className && className !== "" ? className : ""}`,
+          ...ref ? { ref } : {},
+          ...props,
+          "data-layout_name": layoutName,
+          "data-direction": direction,
+          children: flattenedChildren.map((child, index) => {
+            if (!child || !isValidElement(child)) return null;
+            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              child,
+              /* @__PURE__ */ jsx(
+                ContainerOpenCloseProvider,
+                {
+                  layoutName,
+                  containerName: child.props.containerName,
+                  sizeName: fitContent
+                }
+              )
+            ] }, index);
+          })
+        }
+      )
+    }
+  ) });
+}
+
+export { FlexLayout as default };
+//# sourceMappingURL=FlexLayout.js.map
+//# sourceMappingURL=FlexLayout.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,196 @@
+'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);
+
+function FlexLayoutContainer({
+  isFitContent,
+  isFitResize,
+  // fitContent,
+  // containerCount,
+  // layoutName,
+  containerName,
+  grow: initialGrow,
+  prevGrow: initialPrevGrow,
+  isInitialResizable,
+  isResizePanel,
+  children,
+  className,
+  panelMode
+}) {
+  const {
+    direction,
+    panelMovementMode,
+    panelClassName,
+    layoutName,
+    fitContent,
+    containerCount
+  } = FlexLayoutContext.useFlexLayoutContext();
+  const { ref, size } = (
+    // isFitContent && fitContent
+    //?
+    useSizes.useSize(fitContent)
+  );
+  const flexContainerNodeRef = react.useRef(null);
+  const flexContainerRef = react.useCallback(
+    (node) => {
+      flexContainerNodeRef.current = node;
+      if (node !== null) {
+        FlexLayoutContainerStore.setContainerRef(layoutName, containerName, { current: node });
+      }
+    },
+    [layoutName, containerName]
+  );
+  const [growState, setGrowState] = react.useState(initialGrow);
+  react.useEffect(() => {
+    setGrowState(initialGrow);
+  }, [initialGrow]);
+  const [prevGrowState, setPrevGrowState] = 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(() => {
+    if (typeof window == "undefined" || flexContainerNodeRef.current === null)
+      return;
+    const storedGrow = sessionStorage.getItem(containerName);
+    if (storedGrow !== null) {
+      const parsed = parseFloat(storedGrow);
+      if (!isNaN(parsed)) {
+        flexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;
+        setGrowState(parsed);
+      }
+    }
+  }, [containerName]);
+  react.useEffect(() => {
+    if (!flexContainerNodeRef.current) return;
+    const targetNode = flexContainerNodeRef.current;
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "style" && targetNode.style.flex) {
+          const flexValue = targetNode.style.flex;
+          const parsedGrow = parseFloat(flexValue.split(" ")[0]);
+          if (!isNaN(parsedGrow)) {
+            setGrowState(parsedGrow);
+          }
+        }
+      }
+    });
+    observer.observe(targetNode, {
+      attributes: true,
+      attributeFilter: ["style"],
+      attributeOldValue: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerName]);
+  react.useEffect(() => {
+    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent)
+      return;
+    requestAnimationFrame(() => {
+      if (!flexContainerNodeRef.current) return;
+      const sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;
+      const parentSize = flexContainerNodeRef.current.parentElement && flexContainerNodeRef.current.parentElement["client" + sizeName] || 0;
+      if (isFitContent) {
+        flexContainerNodeRef.current.style["max" + sizeName] = size + "px";
+      }
+      if (!isFitResize && isFirstLoad) {
+        setIsFirstLoad(false);
+        return;
+      }
+      if (FlexLayoutUtils.getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {
+        const newGrow = FlexLayoutUtils.mathGrow(size, parentSize, containerCount);
+        setPrevGrowState(growState);
+        setGrowState(newGrow);
+      }
+    });
+  }, [size, containerCount, isFitResize, children]);
+  react.useEffect(() => {
+    if (!flexContainerNodeRef.current) return;
+    let notGrowList = [];
+    let containerList = [
+      ...flexContainerNodeRef.current.parentElement?.children || []
+    ].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 (e.hasAttribute("data-grow") == false || e.getAttribute("data-is_resize") === "true") {
+        notGrowList.push(item);
+        return t;
+      }
+      let grow = parseFloat(item.dataset.grow || "");
+      item.style.flex = `${grow} 1 0%`;
+      t -= grow;
+      return t;
+    }, containerList.length);
+    if (notGrowList.length != 0) {
+      let resizeWeight = 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(
+      "div",
+      {
+        id: containerName,
+        "data-container_name": containerName,
+        ref: flexContainerRef,
+        className: `${styles__default.default["flex-container"]} ${className && className !== "" ? className : ""}`,
+        ...growState !== void 0 ? { ["data-grow"]: growState } : {},
+        ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
+        "data-is_resize": isInitialResizable,
+        "data-is_resize_panel": isResizePanel,
+        style: growState !== void 0 && {
+          flex: `${growState} 1 0%`
+        } || {},
+        children: isFitContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${styles__default.default["flex-content-fit-wrapper"]}`,
+            ref,
+            children
+          }
+        ) || children
+      }
+    ),
+    isResizePanel && /* @__PURE__ */ jsxRuntime.jsx(
+      FlexLayoutResizePanel__default.default,
+      {
+        containerName,
+        layoutName,
+        direction,
+        containerCount,
+        panelMode,
+        panelClassName,
+        panelMovementMode
+      }
+    )
+  ] });
+}
+
+module.exports = FlexLayoutContainer;
+//# sourceMappingURL=FlexLayoutContainer.cjs.map
+//# sourceMappingURL=FlexLayoutContainer.cjs.map

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

@@ -0,0 +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"]}

package/dist/flex-layout/components/FlexLayoutContainer.js

@@ -0,0 +1,189 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useState, useEffect } from 'react';
+import { useSize } from '../hooks/useSizes';
+import { useFlexLayoutContext } from '../providers/FlexLayoutContext';
+import { setContainerRef } from '../store/FlexLayoutContainerStore';
+import styles from '../styles/FlexLayout.module.css';
+import { getGrow, mathGrow, mathWeight } from '../utils/FlexLayoutUtils';
+import FlexLayoutResizePanel from './FlexLayoutResizePanel';
+
+function FlexLayoutContainer({
+  isFitContent,
+  isFitResize,
+  // fitContent,
+  // containerCount,
+  // layoutName,
+  containerName,
+  grow: initialGrow,
+  prevGrow: initialPrevGrow,
+  isInitialResizable,
+  isResizePanel,
+  children,
+  className,
+  panelMode
+}) {
+  const {
+    direction,
+    panelMovementMode,
+    panelClassName,
+    layoutName,
+    fitContent,
+    containerCount
+  } = useFlexLayoutContext();
+  const { ref, size } = (
+    // isFitContent && fitContent
+    //?
+    useSize(fitContent)
+  );
+  const flexContainerNodeRef = useRef(null);
+  const flexContainerRef = useCallback(
+    (node) => {
+      flexContainerNodeRef.current = node;
+      if (node !== null) {
+        setContainerRef(layoutName, containerName, { current: node });
+      }
+    },
+    [layoutName, containerName]
+  );
+  const [growState, setGrowState] = useState(initialGrow);
+  useEffect(() => {
+    setGrowState(initialGrow);
+  }, [initialGrow]);
+  const [prevGrowState, setPrevGrowState] = useState(
+    initialPrevGrow
+  );
+  const [isFirstLoad, setIsFirstLoad] = useState(true);
+  useEffect(() => {
+    if (!flexContainerNodeRef.current) return;
+    setContainerRef(layoutName, containerName, flexContainerNodeRef);
+    return () => {
+      setContainerRef(layoutName, containerName, {
+        current: null
+      });
+    };
+  }, [containerName, layoutName]);
+  useEffect(() => {
+    if (typeof window == "undefined" || flexContainerNodeRef.current === null)
+      return;
+    const storedGrow = sessionStorage.getItem(containerName);
+    if (storedGrow !== null) {
+      const parsed = parseFloat(storedGrow);
+      if (!isNaN(parsed)) {
+        flexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;
+        setGrowState(parsed);
+      }
+    }
+  }, [containerName]);
+  useEffect(() => {
+    if (!flexContainerNodeRef.current) return;
+    const targetNode = flexContainerNodeRef.current;
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "style" && targetNode.style.flex) {
+          const flexValue = targetNode.style.flex;
+          const parsedGrow = parseFloat(flexValue.split(" ")[0]);
+          if (!isNaN(parsedGrow)) {
+            setGrowState(parsedGrow);
+          }
+        }
+      }
+    });
+    observer.observe(targetNode, {
+      attributes: true,
+      attributeFilter: ["style"],
+      attributeOldValue: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerName]);
+  useEffect(() => {
+    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent)
+      return;
+    requestAnimationFrame(() => {
+      if (!flexContainerNodeRef.current) return;
+      const sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;
+      const parentSize = flexContainerNodeRef.current.parentElement && flexContainerNodeRef.current.parentElement["client" + sizeName] || 0;
+      if (isFitContent) {
+        flexContainerNodeRef.current.style["max" + sizeName] = size + "px";
+      }
+      if (!isFitResize && isFirstLoad) {
+        setIsFirstLoad(false);
+        return;
+      }
+      if (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {
+        const newGrow = mathGrow(size, parentSize, containerCount);
+        setPrevGrowState(growState);
+        setGrowState(newGrow);
+      }
+    });
+  }, [size, containerCount, isFitResize, children]);
+  useEffect(() => {
+    if (!flexContainerNodeRef.current) return;
+    let notGrowList = [];
+    let containerList = [
+      ...flexContainerNodeRef.current.parentElement?.children || []
+    ].filter((e) => e.hasAttribute("data-container_name"));
+    let remainingGrow = containerList.reduce((t, e, i) => {
+      let item = e;
+      if (item.classList.contains(styles["flex-resize-panel"])) return t;
+      if (e.hasAttribute("data-grow") == false || e.getAttribute("data-is_resize") === "true") {
+        notGrowList.push(item);
+        return t;
+      }
+      let grow = parseFloat(item.dataset.grow || "");
+      item.style.flex = `${grow} 1 0%`;
+      t -= grow;
+      return t;
+    }, containerList.length);
+    if (notGrowList.length != 0) {
+      let resizeWeight = mathWeight(notGrowList.length, remainingGrow);
+      notGrowList.forEach((e) => {
+        e.dataset.grow = resizeWeight.toString();
+        e.style.flex = `${resizeWeight} 1 0%`;
+      });
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: containerName,
+        "data-container_name": containerName,
+        ref: flexContainerRef,
+        className: `${styles["flex-container"]} ${className && className !== "" ? className : ""}`,
+        ...growState !== void 0 ? { ["data-grow"]: growState } : {},
+        ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
+        "data-is_resize": isInitialResizable,
+        "data-is_resize_panel": isResizePanel,
+        style: growState !== void 0 && {
+          flex: `${growState} 1 0%`
+        } || {},
+        children: isFitContent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${styles["flex-content-fit-wrapper"]}`,
+            ref,
+            children
+          }
+        ) || children
+      }
+    ),
+    isResizePanel && /* @__PURE__ */ jsx(
+      FlexLayoutResizePanel,
+      {
+        containerName,
+        layoutName,
+        direction,
+        containerCount,
+        panelMode,
+        panelClassName,
+        panelMovementMode
+      }
+    )
+  ] });
+}
+
+export { FlexLayoutContainer as default };
+//# sourceMappingURL=FlexLayoutContainer.js.map
+//# sourceMappingURL=FlexLayoutContainer.js.map

package/dist/flex-layout/components/FlexLayoutContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"names":[],"mappings":"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","file":"FlexLayoutContainer.js","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"]}