@byeolnaerim/flex-layout 0.0.9 → 0.0.10

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

@@ -1,110 +1 @@
-"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,
-  children,
-  ref,
-  className,
-  panelClassName,
-  panelMovementMode = "divorce",
-  ...props
-}) {
-  const containerCount = import_react.Children.count(children);
-  const fitContent = direction === "row" ? "width" : "height";
-  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(
-    import_react.isValidElement
-  );
-  if (flattenedChildren.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_FlexLayoutContext.FlexLayoutProvider,
-    {
-      value: {
-        layoutName,
-        direction,
-        panelMovementMode,
-        panelClassName,
-        containerCount,
-        fitContent
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          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 || !(0, import_react.isValidElement)(child)) return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-              child,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_FlexLayoutHooks.ContainerOpenCloseProvider,
-                {
-                  layoutName,
-                  containerName: child.props.containerName,
-                  sizeName: fitContent
-                }
-              )
-            ] }, index);
-          })
-        }
-      )
-    }
-  ) });
-}
-//# sourceMappingURL=FlexLayout.cjs.map
+"use strict";"use client";var E=Object.create;var m=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var n in t)m(e,n,{get:t[n],enumerable:!0})},y=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of P(t))!w.call(e,l)&&l!==n&&m(e,l,{get:()=>t[l],enumerable:!(o=L(t,l))||o.enumerable});return e};var T=(e,t,n)=>(n=e!=null?E(R(e)):{},y(t||!e||!e.__esModule?m(n,"default",{value:e,enumerable:!0}):n,e)),A=e=>y(m({},"__esModule",{value:!0}),e);var O={};N(O,{default:()=>p});module.exports=A(O);var i=require("react/jsx-runtime"),r=require("react"),F=require("../providers/FlexLayoutHooks"),c=T(require("../styles/FlexLayout.module.css"),1),d=require("../providers/FlexLayoutContext");const B=(e,t,n)=>o=>o.type===r.Fragment||o.type==="div"||o.type==="span"?o:(0,r.cloneElement)(o,{layoutName:e,fitContent:t,containerCount:n});function p({layoutName:e,direction:t,children:n,ref:o,className:l,panelClassName:f,panelMovementMode:x="divorce",...h}){const g=r.Children.count(n),s=t==="row"?"width":"height",v=a=>(0,r.isValidElement)(a)&&a.type===r.Fragment,u=r.Children.toArray(n).flatMap(a=>v(a)?r.Children.toArray(a.props.children):[a]).filter(r.isValidElement);return u.length===0?null:(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(d.FlexLayoutProvider,{value:{layoutName:e,direction:t,panelMovementMode:x,panelClassName:f,containerCount:g,fitContent:s},children:(0,i.jsx)("div",{className:`${c.default["flex-layout"]} ${l&&l!==""?l:""}`,...o?{ref:o}:{},...h,"data-layout_name":e,"data-direction":t,children:u.map((a,C)=>!a||!(0,r.isValidElement)(a)?null:(0,i.jsxs)(r.Fragment,{children:[a,(0,i.jsx)(F.ContainerOpenCloseProvider,{layoutName:e,containerName:a.props.containerName,sizeName:s})]},C))})})})}

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

@@ -1,85 +1 @@
-"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,
-  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 === Fragment2;
-  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(Fragment2, { children: [
-              child,
-              /* @__PURE__ */ jsx(
-                ContainerOpenCloseProvider,
-                {
-                  layoutName,
-                  containerName: child.props.containerName,
-                  sizeName: fitContent
-                }
-              )
-            ] }, index);
-          })
-        }
-      )
-    }
-  ) });
-}
-export {
-  FlexLayout as default
-};
-//# sourceMappingURL=FlexLayout.js.map
+"use client";import{Fragment as P,jsx as a,jsxs as L}from"react/jsx-runtime";import{Children as i,cloneElement as h,Fragment as m,isValidElement as s}from"react";import{ContainerOpenCloseProvider as g}from"../providers/FlexLayoutHooks";import v from"../styles/FlexLayout.module.css";import{FlexLayoutProvider as C}from"../providers/FlexLayoutContext";const V=(r,n,o)=>t=>t.type===m||t.type==="div"||t.type==="span"?t:h(t,{layoutName:r,fitContent:n,containerCount:o});function E({layoutName:r,direction:n,children:o,ref:t,className:l,panelClassName:F,panelMovementMode:c="divorce",...d}){const p=i.count(o),u=n==="row"?"width":"height",f=e=>s(e)&&e.type===m,y=i.toArray(o).flatMap(e=>f(e)?i.toArray(e.props.children):[e]).filter(s);return y.length===0?null:a(P,{children:a(C,{value:{layoutName:r,direction:n,panelMovementMode:c,panelClassName:F,containerCount:p,fitContent:u},children:a("div",{className:`${v["flex-layout"]} ${l&&l!==""?l:""}`,...t?{ref:t}:{},...d,"data-layout_name":r,"data-direction":n,children:y.map((e,x)=>!e||!s(e)?null:L(m,{children:[e,a(g,{layoutName:r,containerName:e.props.containerName,sizeName:u})]},x))})})})}export{E as default};

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

@@ -1,262 +1 @@
-"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,
-  // fitContent,
-  // containerCount,
-  // layoutName,
-  containerName,
-  grow: initialGrow,
-  prevGrow: initialPrevGrow,
-  isInitialResizable,
-  isResizePanel,
-  children,
-  className,
-  panelMode
-}) {
-  const {
-    direction,
-    panelMovementMode,
-    panelClassName,
-    layoutName,
-    fitContent,
-    containerCount
-  } = (0, import_FlexLayoutContext.useFlexLayoutContext)();
-  const { ref, size } = (
-    // isFitContent && fitContent
-    //?
-    (0, import_useSizes.useSize)(fitContent)
-  );
-  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) {
-        (0, import_FlexLayoutContainerStore.setContainerRef)(
-          layoutName,
-          containerName,
-          flexContainerNodeRef
-        );
-      } else {
-        (0, import_FlexLayoutContainerStore.setContainerRef)(layoutName, containerName, null);
-      }
-    },
-    [layoutName, containerName]
-  );
-  const [growState, setGrowState] = (0, import_react.useState)(initialGrow);
-  (0, import_react.useEffect)(() => {
-    setGrowState(initialGrow);
-  }, [initialGrow]);
-  const [prevGrowState, setPrevGrowState] = (0, import_react.useState)(
-    initialPrevGrow
-  );
-  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);
-    if (storedGrow !== null) {
-      const parsed = parseFloat(storedGrow);
-      if (!isNaN(parsed)) {
-        flexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;
-        setGrowState(parsed);
-      }
-    }
-  }, [containerName]);
-  (0, import_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]);
-  (0, import_react.useEffect)(() => {
-    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent || // getGrow(flexContainerNodeRef.current) == 0 ||
-    isUserResizingRef.current)
-      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 ((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]);
-  (0, import_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(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;
-      }
-      let grow = parseFloat(item.dataset.grow || "");
-      item.style.flex = `${grow} 1 0%`;
-      t -= grow;
-      return t;
-    }, containerList.length);
-    if (notGrowList.length != 0) {
-      let resizeWeight = (0, import_FlexLayoutUtils.mathWeight)(notGrowList.length, remainingGrow);
-      notGrowList.forEach((e) => {
-        e.dataset.grow = resizeWeight.toString();
-        e.style.flex = `${resizeWeight} 1 0%`;
-      });
-    }
-  }, []);
-  (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: `${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,
-        "data-is_resize_panel": isResizePanel,
-        style: growState !== void 0 && {
-          flex: `${growState} 1 0%`
-        } || {},
-        children: isFitContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: `${import_FlexLayout.default["flex-content-fit-wrapper"]}`,
-            ref,
-            children
-          }
-        ) || children
-      }
-    ),
-    isResizePanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_FlexLayoutResizePanel.default,
-      {
-        containerName,
-        layoutName,
-        direction,
-        containerCount,
-        panelMode,
-        panelClassName,
-        panelMovementMode,
-        onResizingChange: handleResizingChange
-      }
-    )
-  ] });
-}
-//# sourceMappingURL=FlexLayoutContainer.cjs.map
+"use strict";"use client";var ee=Object.create;var z=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ae=(t,a)=>{for(var n in a)z(t,n,{get:a[n],enumerable:!0})},U=(t,a,n,w)=>{if(a&&typeof a=="object"||typeof a=="function")for(let h of re(a))!se.call(t,h)&&h!==n&&z(t,h,{get:()=>a[h],enumerable:!(w=te(a,h))||w.enumerable});return t};var D=(t,a,n)=>(n=t!=null?ee(ne(t)):{},U(a||!t||!t.__esModule?z(n,"default",{value:t,enumerable:!0}):n,t)),oe=t=>U(z({},"__esModule",{value:!0}),t);var ie={};ae(ie,{default:()=>k});module.exports=oe(ie);var g=require("react/jsx-runtime"),s=require("react"),I=require("../hooks/useSizes"),O=require("../providers/FlexLayoutContext"),F=require("../store/FlexLayoutContainerStore"),E=D(require("../styles/FlexLayout.module.css"),1),c=require("../utils/FlexLayoutUtils"),V=D(require("./FlexLayoutResizePanel"),1);function k({isFitContent:t,isFitResize:a,containerName:n,grow:w,prevGrow:h,isInitialResizable:q,isResizePanel:R,children:S,className:G,panelMode:j}){const{direction:B,panelMovementMode:J,panelClassName:K,layoutName:C,fitContent:d,containerCount:m}=(0,O.useFlexLayoutContext)(),{ref:H,size:x}=(0,I.useSize)(d),r=(0,s.useRef)(null),$=(0,s.useRef)(!1),Q=(0,s.useCallback)(e=>{$.current=e},[]),X=(0,s.useCallback)(e=>{r.current=e,e?(0,F.setContainerRef)(C,n,r):(0,F.setContainerRef)(C,n,null)},[C,n]),[y,L]=(0,s.useState)(w);(0,s.useEffect)(()=>{L(w)},[w]);const[T,N]=(0,s.useState)(h),[Y,Z]=(0,s.useState)(!0);return(0,s.useEffect)(()=>{if(typeof window>"u"||r.current===null)return;const e=sessionStorage.getItem(n);if(e!==null){const l=parseFloat(e);isNaN(l)||(r.current.style.flex=`${l} 1 0%`,L(l))}},[n]),(0,s.useEffect)(()=>{if(!r.current)return;const e=r.current,l=new MutationObserver(p=>{for(const o of p)if(o.type==="attributes"&&o.attributeName==="style"&&e.style.flex){const u=e.style.flex,b=parseFloat(u.split(" ")[0]);isNaN(b)||L(b)}});return l.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),()=>{l.disconnect()}},[n]),(0,s.useEffect)(()=>{!r.current||!H||!H.current||!x||!d||$.current||requestAnimationFrame(()=>{if(!r.current)return;const e=`${d.charAt(0).toUpperCase()+d.substring(1)}`,l=r.current.parentElement&&r.current.parentElement["client"+e]||0;if(t&&(r.current.style["max"+e]=x+"px"),!a&&Y){Z(!1);return}if((0,c.getGrow)(r.current)!=0&&a){const p=(0,c.mathGrow)(x,l,m);N(y),L(p)}})},[x,m,a,S]),(0,s.useEffect)(()=>{if(!r.current)return;let e=[],l=[...r.current.parentElement?.children||[]].filter(o=>o.hasAttribute("data-container_name")),p=l.reduce((o,u,b)=>{let M=u;if(M.classList.contains(E.default["flex-resize-panel"]))return o;if(u.hasAttribute("data-grow")==!1||u.getAttribute("data-is_resize")==="true")return e.push(M),o;let A=parseFloat(M.dataset.grow||"");return M.style.flex=`${A} 1 0%`,o-=A,o},l.length);if(e.length!=0){let o=(0,c.mathWeight)(e.length,p);e.forEach(u=>{u.dataset.grow=o.toString(),u.style.flex=`${o} 1 0%`})}},[]),(0,s.useEffect)(()=>{if(!r.current||!t||!d||!x||(0,c.getGrow)(r.current)==0||$.current)return;const e=r.current.parentElement;if(!e)return;const l=d.charAt(0).toUpperCase()+d.substring(1),p=e["client"+l]||0;if(!p||m<=0)return;const o=(0,c.mathGrow)(x,p,m),u=Math.min(m,Math.max(0,o)),b=(0,c.getGrow)(r.current);if(Math.abs(u-b)<.001)return;N(b),L(u);const v=[...e.children||[]].filter(i=>{const f=i;return f.hasAttribute("data-container_name")&&!f.classList.contains(E.default["flex-resize-panel"])}).filter(i=>i!==r.current).filter(i=>i.style.flex!=="0 1 0%"),_=m-u;if(_<=0||v.length===0)return;const W=v.reduce((i,f)=>i+(0,c.getGrow)(f),0);if(W<=0){const i=_/v.length;v.forEach(f=>{f.dataset.grow=i.toString(),f.style.flex=`${i} 1 0%`})}else v.forEach(i=>{const f=(0,c.getGrow)(i),P=_*(f/W);i.dataset.grow=P.toString(),i.style.flex=`${P} 1 0%`})},[x,t,d,m]),(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)("div",{id:n,"data-container_name":n,ref:X,className:`${E.default["flex-container"]} ${G&&G!==""?G:""}`,...y!==void 0?{"data-grow":y}:{},...T!=null?{"data-prev_grow":T}:{},"data-is_resize":q,"data-is_resize_panel":R,style:y!==void 0&&{flex:`${y} 1 0%`}||{},children:t&&(0,g.jsx)("div",{className:`${E.default["flex-content-fit-wrapper"]}`,ref:H,children:S})||S}),R&&(0,g.jsx)(V.default,{containerName:n,layoutName:C,direction:B,containerCount:m,panelMode:j,panelClassName:K,panelMovementMode:J,onResizingChange:Q})]})}