@byeolnaerim/flex-layout 0.0.8 → 0.0.10

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

@@ -1,76 +1 @@
-'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
+"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,70 +1 @@
-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
+"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,196 +1 @@
-'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
+"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})]})}

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

@@ -1,189 +1 @@
-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
+"use client";import{Fragment as re,jsx as A,jsxs as ne}from"react/jsx-runtime";import{useCallback as W,useEffect as m,useRef as P,useState as $}from"react";import{useSize as X}from"../hooks/useSizes";import{useFlexLayoutContext as Y}from"../providers/FlexLayoutContext";import{setContainerRef as U}from"../store/FlexLayoutContainerStore";import L from"../styles/FlexLayout.module.css";import{getGrow as w,mathGrow as D,mathWeight as Z}from"../utils/FlexLayoutUtils";import ee from"./FlexLayoutResizePanel";function te({isFitContent:b,isFitResize:M,containerName:o,grow:v,prevGrow:I,isInitialResizable:O,isResizePanel:_,children:E,className:C,panelMode:V}){const{direction:k,panelMovementMode:q,panelClassName:j,layoutName:y,fitContent:l,containerCount:u}=Y(),{ref:z,size:f}=X(l),t=P(null),S=P(!1),B=W(e=>{S.current=e},[]),J=W(e=>{t.current=e,e?U(y,o,t):U(y,o,null)},[y,o]),[p,g]=$(v);m(()=>{g(v)},[v]);const[F,R]=$(I),[K,Q]=$(!0);return m(()=>{if(typeof window>"u"||t.current===null)return;const e=sessionStorage.getItem(o);if(e!==null){const s=parseFloat(e);isNaN(s)||(t.current.style.flex=`${s} 1 0%`,g(s))}},[o]),m(()=>{if(!t.current)return;const e=t.current,s=new MutationObserver(c=>{for(const r of c)if(r.type==="attributes"&&r.attributeName==="style"&&e.style.flex){const a=e.style.flex,d=parseFloat(a.split(" ")[0]);isNaN(d)||g(d)}});return s.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),()=>{s.disconnect()}},[o]),m(()=>{!t.current||!z||!z.current||!f||!l||S.current||requestAnimationFrame(()=>{if(!t.current)return;const e=`${l.charAt(0).toUpperCase()+l.substring(1)}`,s=t.current.parentElement&&t.current.parentElement["client"+e]||0;if(b&&(t.current.style["max"+e]=f+"px"),!M&&K){Q(!1);return}if(w(t.current)!=0&&M){const c=D(f,s,u);R(p),g(c)}})},[f,u,M,E]),m(()=>{if(!t.current)return;let e=[],s=[...t.current.parentElement?.children||[]].filter(r=>r.hasAttribute("data-container_name")),c=s.reduce((r,a,d)=>{let h=a;if(h.classList.contains(L["flex-resize-panel"]))return r;if(a.hasAttribute("data-grow")==!1||a.getAttribute("data-is_resize")==="true")return e.push(h),r;let G=parseFloat(h.dataset.grow||"");return h.style.flex=`${G} 1 0%`,r-=G,r},s.length);if(e.length!=0){let r=Z(e.length,c);e.forEach(a=>{a.dataset.grow=r.toString(),a.style.flex=`${r} 1 0%`})}},[]),m(()=>{if(!t.current||!b||!l||!f||w(t.current)==0||S.current)return;const e=t.current.parentElement;if(!e)return;const s=l.charAt(0).toUpperCase()+l.substring(1),c=e["client"+s]||0;if(!c||u<=0)return;const r=D(f,c,u),a=Math.min(u,Math.max(0,r)),d=w(t.current);if(Math.abs(a-d)<.001)return;R(d),g(a);const x=[...e.children||[]].filter(n=>{const i=n;return i.hasAttribute("data-container_name")&&!i.classList.contains(L["flex-resize-panel"])}).filter(n=>n!==t.current).filter(n=>n.style.flex!=="0 1 0%"),H=u-a;if(H<=0||x.length===0)return;const T=x.reduce((n,i)=>n+w(i),0);if(T<=0){const n=H/x.length;x.forEach(i=>{i.dataset.grow=n.toString(),i.style.flex=`${n} 1 0%`})}else x.forEach(n=>{const i=w(n),N=H*(i/T);n.dataset.grow=N.toString(),n.style.flex=`${N} 1 0%`})},[f,b,l,u]),ne(re,{children:[A("div",{id:o,"data-container_name":o,ref:J,className:`${L["flex-container"]} ${C&&C!==""?C:""}`,...p!==void 0?{"data-grow":p}:{},...F!=null?{"data-prev_grow":F}:{},"data-is_resize":O,"data-is_resize_panel":_,style:p!==void 0&&{flex:`${p} 1 0%`}||{},children:b&&A("div",{className:`${L["flex-content-fit-wrapper"]}`,ref:z,children:E})||E}),_&&A(ee,{containerName:o,layoutName:y,direction:k,containerCount:u,panelMode:V,panelClassName:j,panelMovementMode:q,onResizingChange:B})]})}export{te as default};

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

@@ -0,0 +1 @@
+"use strict";"use client";var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},y=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of f(e))!m.call(t,i)&&i!==o&&c(t,i,{get:()=>e[i],enumerable:!(s=b(e,i))||s.enumerable});return t};var h=t=>y(c({},"__esModule",{value:!0}),t);var S={};d(S,{FlexLayoutIFramePane:()=>w});module.exports=h(S);var u=require("react/jsx-runtime"),n=require("react"),r=require("rxjs"),a=require("../hooks");function w({url:t,screenKey:e}){const[o,s]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{const i=a.dragStateSubject.pipe((0,r.map)(l=>!!l?.isDragging),(0,r.startWith)(!1),(0,r.distinctUntilChanged)()),g=(0,r.combineLatest)([i,a.isResizingSubject]).pipe((0,r.map)(([l,p])=>l||p),(0,r.distinctUntilChanged)()).subscribe(s);return()=>g.unsubscribe()},[]),(0,u.jsx)("iframe",{src:t,style:{width:"100%",height:"100%",border:0,pointerEvents:o?"none":"auto"},sandbox:"allow-same-origin allow-scripts allow-forms allow-popups",referrerPolicy:"no-referrer",loading:"lazy"},e)}0&&(module.exports={FlexLayoutIFramePane});

package/dist/flex-layout/components/FlexLayoutIFramePane.d.ts

@@ -0,0 +1,4 @@
+export declare function FlexLayoutIFramePane({ url, screenKey, }: {
+    url: string;
+    screenKey?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+"use client";import{jsx as d}from"react/jsx-runtime";import{useEffect as u,useState as g}from"react";import{combineLatest as p,distinctUntilChanged as r,map as t,startWith as b}from"rxjs";import{dragStateSubject as f,isResizingSubject as m}from"../hooks";function S({url:i,screenKey:o}){const[s,n]=g(!1);return u(()=>{const a=f.pipe(t(e=>!!e?.isDragging),b(!1),r()),l=p([a,m]).pipe(t(([e,c])=>e||c),r()).subscribe(n);return()=>l.unsubscribe()},[]),d("iframe",{src:i,style:{width:"100%",height:"100%",border:0,pointerEvents:s?"none":"auto"},sandbox:"allow-same-origin allow-scripts allow-forms allow-popups",referrerPolicy:"no-referrer",loading:"lazy"},o)}export{S as FlexLayoutIFramePane};