@byeolnaerim/flex-layout 0.0.10 → 0.0.12

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

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

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

@@ -1,2 +1,3 @@
 import { FlexLayoutProps } from "../types/FlexLayoutTypes";
-export default function FlexLayout({ layoutName, direction, children, ref, className, panelClassName, panelMovementMode, ...props }: FlexLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+declare const FlexLayout: import("react").ForwardRefExoticComponent<FlexLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FlexLayout;

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

@@ -1 +1 @@
-"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};
+"use client";import{Fragment as k,jsx as r,jsxs as N}from"react/jsx-runtime";import{Children as i,forwardRef as d,Fragment as f,isValidElement as u,useCallback as P,useMemo as R,useRef as h}from"react";import{ContainerOpenCloseProvider as T}from"../providers/FlexLayoutHooks";import D from"../styles/FlexLayout.module.css";import{FlexLayoutProvider as H}from"../providers/FlexLayoutContext";const M=d(function({layoutName:n,direction:o,children:m,className:l,panelClassName:s,panelMovementMode:c="divorce",scrollMode:F,...C},t){const p=i.count(m),a=o==="row"?"width":"height",L=h(null),v=P(e=>{if(L.current=e,typeof t=="function"){t(e);return}t&&(t.current=e)},[t]),x=e=>u(e)&&e.type===f,y=i.toArray(m).flatMap(e=>x(e)?i.toArray(e.props.children):[e]).filter(u),E=R(()=>({layoutName:n,direction:o,panelMovementMode:c,panelClassName:s,containerCount:p,fitContent:a}),[n,o,c,s,p,a]);return y.length===0?null:r(k,{children:r(H,{value:E,children:r("div",{ref:v,className:`${D["flex-layout"]} ${l&&l!==""?l:""}`,...C,"data-scroll-mode":F,"data-layout_name":n,"data-direction":o,children:y.map((e,g)=>!e||!u(e)?null:N(f,{children:[e,r(T,{layoutName:n,containerName:e.props.containerName,sizeName:a})]},e.props.containerName??g))})})})});var K=M;export{K as default};

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

@@ -1 +1 @@
-"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})]})}
+"use strict";"use client";var oe=Object.create;var H=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var le=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var ue=(l,c)=>{for(var a in c)H(l,a,{get:c[a],enumerable:!0})},B=(l,c,a,x)=>{if(c&&typeof c=="object"||typeof c=="function")for(let p of ie(c))!ae.call(l,p)&&p!==a&&H(l,p,{get:()=>c[p],enumerable:!(x=se(c,p))||x.enumerable});return l};var G=(l,c,a)=>(a=l!=null?oe(le(l)):{},B(c||!l||!l.__esModule?H(a,"default",{value:l,enumerable:!0}):a,l)),fe=l=>B(H({},"__esModule",{value:!0}),l);var ce={};ue(ce,{default:()=>Q});module.exports=fe(ce);var y=require("react/jsx-runtime"),n=require("react"),j=require("../hooks/useSizes"),J=require("../providers/FlexLayoutContext"),T=require("../store/FlexLayoutContainerStore"),z=G(require("../styles/FlexLayout.module.css"),1),g=require("../utils/FlexLayoutUtils"),K=G(require("./FlexLayoutResizePanel"),1);function Q({isFitContent:l,isFitResize:c,containerName:a,grow:x,prevGrow:p,isInitialResizable:X,isResizePanel:C,stickyMode:m,children:$,className:R,panelMode:Y}){const{direction:A,panelMovementMode:Z,panelClassName:k,layoutName:S,fitContent:h,containerCount:N}=(0,J.useFlexLayoutContext)(),{ref:w,size:b}=(0,j.useSize)(h),s=(0,n.useRef)(null),P=(0,n.useRef)(!1),_=(0,n.useRef)(null),M=(0,n.useRef)(null),O=(0,n.useRef)(!1),ee=(0,n.useCallback)(e=>{P.current=e},[]),te=(0,n.useCallback)(e=>{s.current=e,e?(0,T.setContainerRef)(S,a,s):(0,T.setContainerRef)(S,a,null)},[S,a]),[v,W]=(0,n.useState)(x),[I,V]=(0,n.useState)(p);(0,n.useEffect)(()=>{W(x)},[x]),(0,n.useEffect)(()=>{V(p)},[p]);const F=(0,n.useCallback)((e,r)=>{typeof e=="number"&&Number.isNaN(e)||W(u=>(typeof e=="number"&&typeof u=="number"?Math.abs(e-u)<.001:Object.is(e,u))?u:(V(r??u),e))},[]);(0,n.useLayoutEffect)(()=>{if(typeof window>"u"||s.current===null)return;const e=sessionStorage.getItem(a);if(e!==null){const r=parseFloat(e);isNaN(r)||(s.current.style.flex=`${r} 1 0%`,F(r))}},[a,F]),(0,n.useEffect)(()=>{if(!s.current)return;const e=s.current,r=o=>{if(!o)return;const i=o.match(/flex\s*:\s*([^;]+)/);if(!i)return;const t=parseFloat(i[1].trim().split(/\s+/)[0]);return Number.isNaN(t)?void 0:t},u=new MutationObserver(o=>{for(const i of o)if(i.type==="attributes"&&i.attributeName==="style"&&e.style.flex){const t=e.style.flex,f=parseFloat(t.split(" ")[0]);if(!isNaN(f)){const d=r(i.oldValue);F(f,d)}}});return u.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),()=>{u.disconnect()}},[a,F]),(0,n.useEffect)(()=>{if(!s.current||!w||!w.current||!b||_.current==b||Math.abs((_.current??0)-b)<=5||P.current)return;_.current=b;const e=requestAnimationFrame(()=>{if(!s.current)return;const r=`${h.charAt(0).toUpperCase()+h.substring(1)}`,u=M.current;if(l&&(s.current.style["max"+r]=b+"px",M.current=b),!(!c&&O.current)){if((0,g.getGrow)(s.current)!=0){const o=s.current.parentElement&&s.current.parentElement["client"+r]||0,i=(0,g.mathGrow)(b,o,N);if(u&&s.current.getBoundingClientRect()[h]/u<=.95)return;const t=[...s.current.parentElement?.children||[]].filter(f=>f.hasAttribute("data-container_name")).filter(f=>f.style.flex!="0 1 0%"&&f!=s.current);s.current.style.flex=`${i} 1 0%`,(0,g.resize)(t,t.length+1-i)}O.current=!0}});return()=>{cancelAnimationFrame(e)}},[b,N,c,$,h,l,w]),(0,n.useEffect)(()=>{if(!s.current)return;let e=[],r=[...s.current.parentElement?.children||[]].filter(o=>o.hasAttribute("data-container_name")),u=r.reduce((o,i,t)=>{let f=i;if(f.classList.contains(z.default["flex-resize-panel"]))return o;if(i.hasAttribute("data-grow")==!1||i.getAttribute("data-is_resize")==="true")return e.push(f),o;let d=parseFloat(f.dataset.grow||"");return f.style.flex=`${d} 1 0%`,o-=d,o},r.length);if(e.length!=0){let o=(0,g.mathWeight)(e.length,u);e.forEach(i=>{i.dataset.grow=o.toString(),i.style.flex=`${o} 1 0%`})}},[]),(0,n.useEffect)(()=>{if(!m||!C||!(m.stickyResizePanel??!0))return;const r=s.current;if(!r)return;const u=r.nextElementSibling,o=r.previousElementSibling,i=L=>!!L&&L.classList.contains(z.default["flex-resize-panel"]),t=m.position==="top"?i(u)?u:null:i(o)?o:null;if(!t)return;const f={position:t.style.position,top:t.style.top,bottom:t.style.bottom},d=m.offsetPx??0;let E=0;const D=()=>{if(!r.isConnected||!t.isConnected)return;const L=r.offsetHeight;if(t.style.position="sticky",A==="row"){m.position==="top"?(t.style.top=`${d}px`,t.style.bottom="auto"):(t.style.bottom=`${d}px`,t.style.top="auto");return}m.position==="top"?(t.style.top=`${d+L}px`,t.style.bottom="auto"):(t.style.bottom=`${d+L}px`,t.style.top="auto")},re=()=>{E&&cancelAnimationFrame(E),E=requestAnimationFrame(D)};D();const U=typeof ResizeObserver<"u"?new ResizeObserver(re):null;return U?.observe(r),()=>{E&&cancelAnimationFrame(E),U?.disconnect(),t.style.position=f.position,t.style.top=f.top,t.style.bottom=f.bottom}},[m,C,A]);const q=m?.offsetPx??0,ne=m&&m.position==="top"?{position:"sticky",top:q,bottom:"auto"}:m&&m.position==="bottom"?{position:"sticky",bottom:q,top:"auto"}:{};return(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)("div",{id:a,"data-container_name":a,"data-is_sticky":m?"true":"false",ref:te,className:`${z.default["flex-container"]} ${R&&R!==""?R:""}`,...v!==void 0?{"data-grow":v}:{},...I!=null?{"data-prev_grow":I}:{},"data-is_resize":X,"data-is_resize_panel":C,style:{...v!==void 0?{flex:`${v} 1 0%`}:{},...ne},children:l&&(0,y.jsx)("div",{className:`${z.default["flex-content-fit-wrapper"]}`,ref:w,children:$})||$}),C&&(0,y.jsx)(K.default,{containerName:a,layoutName:S,direction:A,containerCount:N,panelMode:Y,panelClassName:k,panelMovementMode:Z,onResizingChange:ee})]})}

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

@@ -1,2 +1,2 @@
 import { FlexContainerProps } from "../types/FlexLayoutTypes";
-export default function FlexLayoutContainer({ isFitContent, isFitResize, containerName, grow: initialGrow, prevGrow: initialPrevGrow, isInitialResizable, isResizePanel, children, className, panelMode, }: FlexContainerProps): import("react/jsx-runtime").JSX.Element;
+export default function FlexLayoutContainer({ isFitContent, isFitResize, containerName, grow: initialGrow, prevGrow: initialPrevGrow, isInitialResizable, isResizePanel, stickyMode, children, className, panelMode, }: FlexContainerProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+"use strict";"use client";var me=Object.create;var H=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var ge=(n,o)=>{for(var r in o)H(n,r,{get:o[r],enumerable:!0})},V=(n,o,r,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of he(o))!fe.call(n,a)&&a!==r&&H(n,a,{get:()=>o[a],enumerable:!(l=de(o,a))||l.enumerable});return n};var we=(n,o,r)=>(r=n!=null?me(pe(n)):{},V(o||!n||!n.__esModule?H(r,"default",{value:n,enumerable:!0}):r,n)),be=n=>V(H({},"__esModule",{value:!0}),n);var ve={};ge(ve,{default:()=>q});module.exports=be(ve);var G=require("react/jsx-runtime"),c=require("react"),e=require("rxjs"),j=we(require("./../styles/sentinelStyle.module.css"),1);function q({extraHeight:n=0,extraHeightUnit:o="px",targetRef:r}){const l=(0,c.useRef)(null),a=(0,c.useRef)(-1),$=(0,c.useRef)(null),S=(0,c.useRef)(-1);return(0,c.useLayoutEffect)(()=>{if(typeof window>"u")return;const M=$.current;if(!M)return;const t=(r?.current?r.current:M.parentElement)??null;if(!t)return;const k=t.style.height,J=t.style.minHeight;let x=!1,d=null;const E=1e3,K=30;let g=0,h=!1,p=null;const T=new e.Subject,B=new e.Subject,F=new e.Subscription,Q=()=>{if(l.current=null,performance.now()<g){h=!0;return}x=!0,d!=null&&cancelAnimationFrame(d),d=window.requestAnimationFrame(()=>{x=!1});const s=t.style.height,v=t.style.minHeight;try{t.style.height="auto",t.style.minHeight="0px";const u=Math.max(0,Math.round(window.visualViewport?.height??window.innerHeight??0)),f=window.getComputedStyle(t),re=t.getBoundingClientRect(),ie=Math.max(0,Math.round(re.top)),D=Math.max(0,u-ie),C=Math.max(0,Math.ceil(t.scrollHeight)),z=parseFloat(f.paddingTop)||0,N=parseFloat(f.paddingBottom)||0,I=parseFloat(f.borderTopWidth)||0,W=parseFloat(f.borderBottomWidth)||0;let L=0,y=0;f.boxSizing==="border-box"?(L=C+I+W,y=D):(L=Math.max(0,C-z-N),y=Math.max(0,D-z-N-I-W));let _=0,m=t.lastElementChild;for(;m&&m.dataset.flexLayoutDynamicHeightAnchor==="true";)m=m.previousElementSibling;if(m){const ue=window.getComputedStyle(m);_=parseFloat(ue.marginBottom)||0}const P=Number.isFinite(n)?n:0,se=o==="%"?"%":"px",U=Math.max(y,Math.ceil(L+_)),le=se==="px"?U+P:U*(1+P/100),O=Math.max(0,Math.ceil(le)),A=Math.max(0,Math.ceil(y)),ae=Math.abs(O-a.current)<1,ce=Math.abs(A-S.current)<1;if(ae&&ce){t.style.height=s,t.style.minHeight=v,T.next();return}a.current=O,S.current=A,t.style.height=`${O}px`,t.style.minHeight=`${A}px`}catch{t.style.height=s,t.style.minHeight=v}},R=()=>{if(performance.now()<g){h=!0;return}l.current==null&&(l.current=window.requestAnimationFrame(Q))},X=new e.Observable(i=>{const s=new MutationObserver(v=>{for(const u of v)if(!(u.type==="attributes"&&u.attributeName==="style"&&(u.target===t||u.target===M))){i.next();return}});return s.observe(t,{subtree:!0,childList:!0,attributes:!0,characterData:!0}),()=>s.disconnect()}),Y=new e.Observable(i=>{const s=new ResizeObserver(()=>{x||i.next()});return s.observe(t),t.firstElementChild&&s.observe(t.firstElementChild),()=>s.disconnect()}),Z=(0,e.fromEvent)(window,"resize",{passive:!0}),w=window.visualViewport,ee=w?(0,e.fromEvent)(w,"resize"):new e.Observable,te=w?(0,e.fromEvent)(w,"scroll"):new e.Observable,b=document.fonts,ne=b?.addEventListener?(0,e.fromEvent)(b,"loadingdone"):new e.Observable,oe=b?.addEventListener?(0,e.fromEvent)(b,"loadingerror"):new e.Observable;return F.add((0,e.merge)(X,Y,Z,ee,te,ne,oe,B).pipe((0,e.auditTime)(0,e.animationFrameScheduler)).subscribe(()=>R())),F.add(T.pipe((0,e.bufferTime)(E),(0,e.map)(i=>i.length),(0,e.filter)(i=>i>=K)).subscribe(()=>{const i=performance.now();g=Math.max(g,i+E),h=!0,p!=null&&window.clearTimeout(p),p=window.setTimeout(()=>{h&&(h=!1,R())},E)})),R(),()=>{l.current!=null&&cancelAnimationFrame(l.current),d!=null&&cancelAnimationFrame(d),p!=null&&window.clearTimeout(p),F.unsubscribe(),T.complete(),B.complete(),t.style.height=k,t.style.minHeight=J}},[n,o,r]),(0,G.jsx)("div",{ref:$,"data-flex-layout-dynamic-height-anchor":"true",className:j.default["flex-layout-sentinel-style"],"aria-hidden":"true"})}

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

@@ -0,0 +1,6 @@
+import { type RefObject } from "react";
+export default function FlexLayoutDynamicHeight({ extraHeight, extraHeightUnit, targetRef, }: {
+    extraHeight?: number;
+    extraHeightUnit?: "px" | "%";
+    targetRef?: RefObject<HTMLElement | null>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+"use client";import{jsx as be}from"react/jsx-runtime";import{useLayoutEffect as ae,useRef as w}from"react";import{Observable as i,Subject as V,Subscription as ce,animationFrameScheduler as ue,auditTime as me,bufferTime as de,filter as he,fromEvent as m,map as pe,merge as fe}from"rxjs";import ge from"./../styles/sentinelStyle.module.css";function we({extraHeight:b=0,extraHeightUnit:O="px",targetRef:v}){const s=w(null),A=w(-1),$=w(null),S=w(-1);return ae(()=>{if(typeof window>"u")return;const y=$.current;if(!y)return;const e=(v?.current?v.current:y.parentElement)??null;if(!e)return;const j=e.style.height,q=e.style.minHeight;let H=!1,l=null;const M=1e3,G=30;let d=0,a=!1,c=null;const x=new V,B=new V,E=new ce,k=()=>{if(s.current=null,performance.now()<d){a=!0;return}H=!0,l!=null&&cancelAnimationFrame(l),l=window.requestAnimationFrame(()=>{H=!1});const n=e.style.height,f=e.style.minHeight;try{e.style.height="auto",e.style.minHeight="0px";const o=Math.max(0,Math.round(window.visualViewport?.height??window.innerHeight??0)),u=window.getComputedStyle(e),te=e.getBoundingClientRect(),ne=Math.max(0,Math.round(te.top)),D=Math.max(0,o-ne),C=Math.max(0,Math.ceil(e.scrollHeight)),z=parseFloat(u.paddingTop)||0,N=parseFloat(u.paddingBottom)||0,I=parseFloat(u.borderTopWidth)||0,W=parseFloat(u.borderBottomWidth)||0;let F=0,g=0;u.boxSizing==="border-box"?(F=C+I+W,g=D):(F=Math.max(0,C-z-N),g=Math.max(0,D-z-N-I-W));let _=0,r=e.lastElementChild;for(;r&&r.dataset.flexLayoutDynamicHeightAnchor==="true";)r=r.previousElementSibling;if(r){const le=window.getComputedStyle(r);_=parseFloat(le.marginBottom)||0}const P=Number.isFinite(b)?b:0,oe=O==="%"?"%":"px",U=Math.max(g,Math.ceil(F+_)),re=oe==="px"?U+P:U*(1+P/100),R=Math.max(0,Math.ceil(re)),L=Math.max(0,Math.ceil(g)),ie=Math.abs(R-A.current)<1,se=Math.abs(L-S.current)<1;if(ie&&se){e.style.height=n,e.style.minHeight=f,x.next();return}A.current=R,S.current=L,e.style.height=`${R}px`,e.style.minHeight=`${L}px`}catch{e.style.height=n,e.style.minHeight=f}},T=()=>{if(performance.now()<d){a=!0;return}s.current==null&&(s.current=window.requestAnimationFrame(k))},J=new i(t=>{const n=new MutationObserver(f=>{for(const o of f)if(!(o.type==="attributes"&&o.attributeName==="style"&&(o.target===e||o.target===y))){t.next();return}});return n.observe(e,{subtree:!0,childList:!0,attributes:!0,characterData:!0}),()=>n.disconnect()}),K=new i(t=>{const n=new ResizeObserver(()=>{H||t.next()});return n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),()=>n.disconnect()}),Q=m(window,"resize",{passive:!0}),h=window.visualViewport,X=h?m(h,"resize"):new i,Y=h?m(h,"scroll"):new i,p=document.fonts,Z=p?.addEventListener?m(p,"loadingdone"):new i,ee=p?.addEventListener?m(p,"loadingerror"):new i;return E.add(fe(J,K,Q,X,Y,Z,ee,B).pipe(me(0,ue)).subscribe(()=>T())),E.add(x.pipe(de(M),pe(t=>t.length),he(t=>t>=G)).subscribe(()=>{const t=performance.now();d=Math.max(d,t+M),a=!0,c!=null&&window.clearTimeout(c),c=window.setTimeout(()=>{a&&(a=!1,T())},M)})),T(),()=>{s.current!=null&&cancelAnimationFrame(s.current),l!=null&&cancelAnimationFrame(l),c!=null&&window.clearTimeout(c),E.unsubscribe(),x.complete(),B.complete(),e.style.height=j,e.style.minHeight=q}},[b,O,v]),be("div",{ref:$,"data-flex-layout-dynamic-height-anchor":"true",className:ge["flex-layout-sentinel-style"],"aria-hidden":"true"})}export{we as default};

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

@@ -1 +1 @@
-"use strict";"use client";var ue=Object.create;var J=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,Se=Object.prototype.hasOwnProperty;var xe=(n,e)=>{for(var t in e)J(n,t,{get:e[t],enumerable:!0})},pe=(n,e,t,T)=>{if(e&&typeof e=="object"||typeof e=="function")for(let u of be(e))!Se.call(n,u)&&u!==t&&J(n,u,{get:()=>e[u],enumerable:!(T=De(e,u))||T.enumerable});return n};var j=(n,e,t)=>(t=n!=null?ue(Te(n)):{},pe(e||!n||!n.__esModule?J(t,"default",{value:n,enumerable:!0}):t,n)),Le=n=>pe(J({},"__esModule",{value:!0}),n);var ye={};xe(ye,{default:()=>ge});module.exports=Le(ye);var i=require("react/jsx-runtime"),O=require("react"),w=require("../hooks/useDrag"),te=require("../hooks/useFlexLayoutSplitScreen"),l=require("../store/FlexLayoutContainerStore"),U=j(require("../styles/FlexLayout.module.css"),1),ne=j(require("./FlexLayout"),1),K=j(require("./FlexLayoutContainer"),1),se=j(require("./FlexLayoutSplitScreenDragBox"),1),re=j(require("fast-deep-equal"),1),Y=require("rxjs"),ce=j(require("./FlexLayoutSplitScreenDragBoxContainer"),1),le=j(require("./FlexLayoutSplitScreenDragBoxItem"),1),me=j(require("./FlexLayoutSplitScreenDragBoxTitleMore"),1),oe=j(require("./FlexLayoutSplitScreenScrollBox"),1);function he({x:n,y:e,element:t}){const{x:T,y:u,right:v,bottom:s}=t.getBoundingClientRect();return n<T||n>v||e<u||e>s}function ee({x:n,y:e,element:t}){const{x:T,y:u,right:v,bottom:s}=t.getBoundingClientRect();return n>=T&&n<=v&&e>=u&&e<=s}const Q=({orderName:n,parentOrderName:e,containerName:t,parentLayoutName:T,layoutName:u,dropComponent:v,navigationTitle:s,nextContainerName:k,isUsePrefix:S=!0,beforeDropTargetComponent:D,afterDropTargetComponent:R,centerDropTargetComponent:g,dropDocumentOutsideOption:N,screenKey:E=Array.from(window.crypto.getRandomValues(new Uint32Array(16)),p=>p.toString(32).padStart(2,"0")).join("")})=>{const p=e||n;let F,C,z;p===n||p==="center"?F=n==="before"?{beforeDropTargetComponent:D}:n==="after"?{afterDropTargetComponent:R}:{centerDropTargetComponent:g.filter(a=>!a.containerName.split("_").at(0).startsWith(t.split("_").at(0)))}:F=p==="before"?{beforeDropTargetComponent:D}:{afterDropTargetComponent:R};const b=Object.entries(F)[0];z=b[0],C=b[1];const o={containerName:`${t+"_"+u}${S?"_"+n+"-"+C.length:""}`,component:(0,O.cloneElement)(v,{key:E,screenKey:E}),navigationTitle:s,dropDocumentOutsideOption:N,screenKey:E||Array.from(window.crypto.getRandomValues(new Uint32Array(16)),a=>a.toString(32).padStart(2,"0")).join("")};let m;if(k){const a=C.findIndex(P=>P.containerName===k);a!==-1?p===n?n==="before"?m=[...C.slice(0,a),o,...C.slice(a)]:m=[...C.slice(0,a+1),o,...C.slice(a+1)]:p==="after"&&n==="before"?m=[...C.slice(0,a),o,...C.slice(a)]:p==="before"&&n==="after"?m=[...C.slice(0,a+1),o,...C.slice(a+1)]:n==="before"?m=[...C.slice(0,a),o,...C.slice(a)]:m=[...C.slice(0,a+1),o,...C.slice(a+1)]:p==="center"&&n==="after"?m=[o,...C]:p==="center"&&n==="before"?m=[...C,o]:m=n==="before"?[o,...C]:[...C,o]}else m=n==="before"?[o,...C]:[...C,o];const h=new Set,$=m.filter(a=>h.has(a.containerName)?!1:(h.add(a.containerName),!0));return w.dropMovementEventSubject.next({state:"append",targetParentLayoutName:T,targetLayoutName:u,targetContainerName:t,orderName:n}),{[z]:$}},I=(n,e,t)=>{const T=n.filter(u=>u.containerName!==e);return T.length!=n.length&&t(n.length-T.length),T};function Oe(n,e){return e+1<n.length?{adjacentItem:n[e+1],adjacentIndex:e+1}:e-1>=0?{adjacentItem:n[e-1],adjacentIndex:e-1}:{adjacentItem:null,adjacentIndex:e}}const $e=n=>{const e=n.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);if(["before","center","after"].some(t=>t===e))return e};function ge({children:n,containerName:e,layoutName:t,navigationTitle:T,dropDocumentOutsideOption:u,screenKey:v}){const{direction:s,isSplit:k,boundaryContainerSize:S,afterDropTargetComponent:D,beforeDropTargetComponent:R,centerDropTargetComponent:g,setAfterDropTargetComponent:N,setBeforeDropTargetComponent:E,setCenterDropTargetComponent:p,layoutRef:F,setIsSplit:C,setDirection:z}=(0,te.useFlexLayoutSplitScreen)({isSplitInitial:!1,directionInitial:"row",selfContainerName:e,parentLayoutName:"",layoutName:t});return(0,O.useEffect)(()=>{(0,l.resetRootSplitScreen)(t);const b=(0,l.getSplitScreen)(t,t).subscribe(o=>{o?(E([...o.beforeDropTargetComponent]),N([...o.afterDropTargetComponent]),p([...o.centerDropTargetComponent]),z(o.direction),(o.beforeDropTargetComponent.length!==0||o.afterDropTargetComponent.length!==0)&&C(!0)):(0,l.setSplitScreen)(t,t,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[{containerName:e,component:n,navigationTitle:T,dropDocumentOutsideOption:u,screenKey:v||Array.from(window.crypto.getRandomValues(new Uint32Array(16)),m=>m.toString(32).padStart(2,"0")).join("")}],direction:s})});return()=>{b.unsubscribe(),(0,l.removeRootSplitScreen)(t)}},[t,v,T,n,s]),(0,O.useEffect)(()=>{const b=w.dropMovementEventSubject.pipe((0,Y.distinctUntilChanged)((o,m)=>{const h=$=>{const{children:a,component:P,targetComponent:_,x:q,y:M,...H}=$||{};return H};return(0,re.default)(h(o),h(m))})).subscribe(o=>{if(o.state==="remove")(o.targetParentLayoutName===t||o.targetParentLayoutName===""&&o.targetLayoutName===t)&&requestAnimationFrame(()=>{let m=_=>{if(o.nextContainerName&&o.dropTargetComponentEvent&&o.targetComponent){const q=Q({orderName:_,containerName:o.nextContainerName,parentLayoutName:"",layoutName:t,dropComponent:o.targetComponent,navigationTitle:o.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:D,beforeDropTargetComponent:R,centerDropTargetComponent:g,dropDocumentOutsideOption:u,screenKey:o.dropTargetComponentEvent.screenKey});(0,l.setSplitScreen)(t,t,{...(0,l.getCurrentSplitScreenComponents)(t,t)||{afterDropTargetComponent:D,beforeDropTargetComponent:R,centerDropTargetComponent:g,direction:s},...q}),Promise.resolve().then(()=>o.dropEndCallback&&o.dropEndCallback({x:o.x,y:o.y,containerName:e}))}};const h=(0,l.getCurrentSplitScreenComponents)(t,t),$=I(h?.afterDropTargetComponent||D,o.targetContainerName,()=>m("after")),a=I(h?.beforeDropTargetComponent||R,o.targetContainerName,()=>m("before")),P=I(h?.centerDropTargetComponent||g,o.targetContainerName,()=>m("center"));(0,l.setSplitScreen)(t,t,{afterDropTargetComponent:$,beforeDropTargetComponent:a,centerDropTargetComponent:P,direction:s})});else if(o.state==="append"){const{x:m,y:h,dropEndCallback:$,dropTargetComponentEvent:a,orderName:P,parentOrderName:_,targetLayoutName:q,targetParentLayoutName:M,targetContainerName:H,targetComponent:W,nextContainerName:c}=o;if(F.current&&P&&m&&h&&W&&a&&q===t&&ee({x:m,y:h,element:F.current})){const{direction:r,navigationTitle:f,dropDocumentOutsideOption:d}=a,x=P!=="center",y=P==="center"&&g.length<=1;if(x||y)if(C(!0),x){z(r);const L=Q({orderName:P,parentOrderName:_,containerName:H,nextContainerName:c,dropComponent:W,parentLayoutName:"",layoutName:t,navigationTitle:f,isUsePrefix:!0,afterDropTargetComponent:D,beforeDropTargetComponent:R,centerDropTargetComponent:g,dropDocumentOutsideOption:d});(0,l.setSplitScreen)(t,t,{afterDropTargetComponent:D,beforeDropTargetComponent:R,centerDropTargetComponent:g,direction:r,...L,direction:r}),Promise.resolve().then(()=>$&&$({x:o.x,y:o.y,containerName:e}))}else{const L=(0,l.getCurrentSplitScreenComponents)(t,`${t}_center=${g[0].screenKey}`)||{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[],direction:s};(0,l.setSplitScreen)(t,`${t}_center=${g[0].screenKey}`,{...L,centerDropTargetComponent:[g[0],{containerName:`${H}_${t}_${P}`,component:W,dropDocumentOutsideOption:d,screenKey:a.screenKey,navigationTitle:f}]})}}}});return()=>{b.unsubscribe()}},[s,t,k,R,D,g]),(0,i.jsxs)("div",{className:`${U.default["flex-split-screen"]}`,ref:F,children:[(0,i.jsxs)(ne.default,{direction:s,layoutName:t,"data-is_split":k,panelMovementMode:"bulldozer",children:[R.length!=0?(0,i.jsx)(i.Fragment,{children:R.map(({containerName:b,component:o,navigationTitle:m,dropDocumentOutsideOption:h,screenKey:$},a)=>(0,i.jsx)(K.default,{containerName:b,isInitialResizable:!0,isResizePanel:!0,children:(0,i.jsx)(V,{parentDirection:s,layoutName:`${t}_before`,parentLayoutName:t,containerName:b,depth:1,rootRef:F,screenKey:$,initialCenterComponents:[{navigationTitle:m,component:o,containerName:b,dropDocumentOutsideOption:h,screenKey:$}],rootName:t})},b))}):(0,i.jsx)("div",{}),g.length===0?(0,i.jsx)("div",{}):(0,i.jsx)(K.default,{containerName:`${g[0].containerName}`,isInitialResizable:!0,isResizePanel:k,children:k?(0,i.jsx)(V,{parentDirection:s,layoutName:`${t}_center`,parentLayoutName:t,containerName:`${g[0].containerName}`,depth:0,rootRef:F,screenKey:g[0].screenKey,initialCenterComponents:[{navigationTitle:g[0].navigationTitle,component:g[0].component,containerName:g[0].containerName,dropDocumentOutsideOption:g[0].dropDocumentOutsideOption,screenKey:g[0].screenKey}],rootName:t}):(0,i.jsx)(oe.default,{keyName:g[0].containerName,isDefaultScrollStyle:!0,children:g[0].component})}),D.length!=0?(0,i.jsx)(i.Fragment,{children:D.map(({containerName:b,component:o,navigationTitle:m,dropDocumentOutsideOption:h,screenKey:$},a)=>(0,i.jsx)(K.default,{containerName:b,isInitialResizable:!0,isResizePanel:D.length-1!==a,children:(0,i.jsx)(V,{parentDirection:s,layoutName:`${t}_after`,parentLayoutName:t,containerName:b,depth:1,rootRef:F,screenKey:$,initialCenterComponents:[{navigationTitle:m,component:o,containerName:b,dropDocumentOutsideOption:h,screenKey:$}],rootName:t})},b))}):(0,i.jsx)("div",{})]}),S&&(0,i.jsx)("div",{className:`${U.default["flex-split-screen-boundary-container"]}`,style:{...S},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})}function V({containerName:n,layoutName:e,parentLayoutName:t,parentDirection:T,depth:u,rootRef:v,rootName:s,initialCenterComponents:k,screenKey:S}){const{direction:D,isSplit:R,boundaryContainerSize:g,afterDropTargetComponent:N,beforeDropTargetComponent:E,centerDropTargetComponent:p,setAfterDropTargetComponent:F,setBeforeDropTargetComponent:C,setCenterDropTargetComponent:z,layoutRef:b,setIsSplit:o,setDirection:m}=(0,te.useFlexLayoutSplitScreen)({isSplitInitial:!1,directionInitial:"row",parentDirection:T,selfContainerName:n,parentLayoutName:t,layoutName:e}),[h,$]=(0,O.useState)(!1),[a,P]=(0,O.useState)(0),_=(0,O.useRef)(p),q=(0,O.useRef)(k??[]),M=(0,O.useRef)(a);(0,O.useEffect)(()=>{const c=`${e}=${S}`,r=(0,l.getSplitScreen)(s,c).pipe((0,Y.take)(1)).subscribe(f=>{f||(0,l.setSplitScreen)(s,c,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:q.current,direction:D})});return()=>{(0,l.removeSplitScreenChild)(s,`${e}=${S}`),r.unsubscribe()}},[s,e,S]),(0,O.useEffect)(()=>{const c=(0,l.getSplitScreen)(s,`${e}=${S}`).subscribe(r=>{r&&(C([...r.beforeDropTargetComponent]),F([...r.afterDropTargetComponent]),z([...r.centerDropTargetComponent]),m(r.direction),r.beforeDropTargetComponent.length!==0||r.afterDropTargetComponent.length!==0?o(!0):r.beforeDropTargetComponent.length===0&&r.centerDropTargetComponent.length===0&&r.afterDropTargetComponent.length===0&&(w.dropMovementEventSubject.next({state:"remove",targetContainerName:n,targetParentLayoutName:"",targetLayoutName:t}),$(!0)))});return()=>{c.unsubscribe(),(0,l.removeRootSplitScreen)(e)}},[s,e]),(0,O.useEffect)(()=>{const c=w.dropMovementEventSubject.pipe((0,Y.distinctUntilChanged)((r,f)=>{const d=x=>{const{children:y,component:L,targetComponent:A,x:B,y:G,...X}=x||{};return X};return(0,re.default)(d(r),d(f))})).subscribe(r=>{if(r.state==="remove")(r.targetParentLayoutName===e||r.targetParentLayoutName===""&&r.targetLayoutName===e)&&requestAnimationFrame(()=>{let f=A=>{if(r.nextContainerName&&r.dropTargetComponentEvent&&r.targetComponent){const B=Q({orderName:A,containerName:r.nextContainerName,parentLayoutName:t,layoutName:e,dropComponent:r.targetComponent,navigationTitle:r.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:N,beforeDropTargetComponent:E,centerDropTargetComponent:p,dropDocumentOutsideOption:r.dropTargetComponentEvent?.dropDocumentOutsideOption,screenKey:r.dropTargetComponentEvent.screenKey});(0,l.setSplitScreen)(s,`${e}=${S}`,{...(0,l.getCurrentSplitScreenComponents)(s,`${e}=${S}`)||{afterDropTargetComponent:N,beforeDropTargetComponent:E,centerDropTargetComponent:p,direction:D},...B}),Promise.resolve().then(()=>r.dropEndCallback&&r.dropEndCallback({x:r.x,y:r.y,containerName:n}))}};const d=(0,l.getCurrentSplitScreenComponents)(s,`${e}=${S}`),x=I(d?.afterDropTargetComponent||N,r.targetContainerName,()=>f("after")),y=I(d?.beforeDropTargetComponent||E,r.targetContainerName,()=>f("before")),L=I(d?.centerDropTargetComponent||p,r.targetContainerName,()=>f("center"));(0,l.setSplitScreen)(s,`${e}=${S}`,{afterDropTargetComponent:x,beforeDropTargetComponent:y,centerDropTargetComponent:L,direction:D})});else if(r.state==="append"){const{x:f,y:d,dropEndCallback:x,dropTargetComponentEvent:y,orderName:L,targetLayoutName:A,targetParentLayoutName:B,targetContainerName:G,targetComponent:X,nextContainerName:Ce,parentOrderName:de}=r;if(b.current&&L&&f&&d&&y&&ee({x:f,y:d,element:b.current})){const{direction:Z,navigationTitle:ie,dropDocumentOutsideOption:ae,screenKey:ve}=y;if(A===e&&X)if(Z===T&&L!=="center")w.dropMovementEventSubject.next({state:"append",targetContainerName:G,targetParentLayoutName:"",targetLayoutName:t,targetComponent:X,nextContainerName:n,parentOrderName:$e(e)||L,orderName:L,x:f,y:d,dropEndCallback:x,dropTargetComponentEvent:{navigationTitle:ie,dropDocumentOutsideOption:ae,direction:T,screenKey:S}});else{L!=="center"&&(m(Z),o(!0));const fe=Q({orderName:L,parentOrderName:de,containerName:G,nextContainerName:Ce,parentLayoutName:t,layoutName:e,dropComponent:X,navigationTitle:ie,isUsePrefix:L!=="center",afterDropTargetComponent:N,beforeDropTargetComponent:E,centerDropTargetComponent:p,dropDocumentOutsideOption:ae});(0,l.setSplitScreen)(s,`${e}=${S}`,{...(0,l.getCurrentSplitScreenComponents)(s,`${e}=${S}`)||{afterDropTargetComponent:N,beforeDropTargetComponent:E,centerDropTargetComponent:p,direction:D},...fe,direction:Z}),Promise.resolve().then(()=>r.dropEndCallback&&r.dropEndCallback({x:r.x,y:r.y,containerName:n}))}}}});return()=>{c.unsubscribe()}},[D,T,t,e,E,N,p]),(0,O.useEffect)(()=>{_.current=p},[p]),(0,O.useEffect)(()=>{M.current=a},[a]);const[H,W]=(0,O.useState)(!1);return(0,i.jsx)(i.Fragment,{children:!h&&(0,i.jsxs)("div",{className:`${U.default["flex-split-screen"]}`,ref:b,children:[(0,i.jsxs)(ne.default,{direction:D,layoutName:`${e}`,panelMovementMode:"bulldozer",children:[E.length!=0?(0,i.jsx)(i.Fragment,{children:E.map(({containerName:c,component:r,navigationTitle:f,dropDocumentOutsideOption:d,screenKey:x},y)=>(0,i.jsx)(K.default,{containerName:c,isInitialResizable:!0,isResizePanel:!0,children:(0,i.jsx)(V,{parentDirection:D,layoutName:`${e}_before-${u}`,parentLayoutName:e,containerName:c,depth:u+1,rootRef:v,screenKey:x,initialCenterComponents:[{navigationTitle:f,component:r,containerName:c,dropDocumentOutsideOption:d,screenKey:x}],rootName:s})},c))}):(0,i.jsx)("div",{}),p.length!=0?(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(K.default,{containerName:`${(p[a]||p[0]).containerName}`,isInitialResizable:!0,isResizePanel:R,children:R?(0,i.jsx)("div",{"data-key":S,children:(0,i.jsx)(V,{parentDirection:D,layoutName:`${e}_center-${u}`,parentLayoutName:e,containerName:`${(p[a]||p[0]).containerName}`,depth:u+1,rootRef:v,initialCenterComponents:p.map(({navigationTitle:c,component:r,containerName:f,dropDocumentOutsideOption:d,screenKey:x})=>({navigationTitle:c,component:r,containerName:f,dropDocumentOutsideOption:d,screenKey:x})),screenKey:S,rootName:s})}):(0,i.jsxs)(oe.default,{keyName:(p[a]||p[0]).containerName,isDefaultScrollStyle:!0,children:[!H&&(0,i.jsx)("div",{className:`${U.default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,children:(0,i.jsxs)("div",{"data-is_split":R,"data-layout_name":e,"data-parent_layout_name":t,"data-container_name":`${(p[a]||p[0]).containerName}`,className:`${U.default["flex-split-screen-drag-box-title-wrapper"]}`,children:[(0,i.jsx)(ce.default,{"data-layout_name":e,layoutName:e,children:p.map((c,r)=>(0,i.jsx)(le.default,{onClose:f=>{M.current===r&&p.length===1?w.dropMovementEventSubject.next({state:"remove",targetContainerName:n,targetParentLayoutName:t,targetLayoutName:e}):(p.length===M.current+1&&P(M.current-1),z(d=>{const x=I(d,c.containerName,()=>{}),y=`${e}=${S}`,L=(0,l.getCurrentSplitScreenComponents)(s,y)||{afterDropTargetComponent:N,beforeDropTargetComponent:E,centerDropTargetComponent:d,direction:D};return(0,l.setSplitScreen)(s,y,{...L,centerDropTargetComponent:x}),x}))},isActive:a===r,children:(0,i.jsx)(se.default,{screenKey:c.screenKey,onClick:()=>{P(r)},containerName:c.containerName,dropDocumentOutsideOption:c.dropDocumentOutsideOption,targetComponent:c.component,navigationTitle:c.navigationTitle,"data-container-name":c.containerName,"data-layout-name":e,"data-parent-layout-name":t,dropEndCallback:({x:f,y:d,containerName:x})=>{if(!v.current||!b.current)return;const y=he({x:f,y:d,element:v.current}),L=ee({x:f,y:d,element:b.current});if(!y&&!L||!y&&L&&_.current.length>1){const A={};if(_.current.length>1){const{adjacentItem:B,adjacentIndex:G}=Oe(_.current,M.current);B&&M.current===r&&Object.assign(A,{x:f,y:d,targetComponent:B.component,nextContainerName:B.containerName,orderName:"center",dropTargetComponentEvent:{navigationTitle:B.navigationTitle,dropDocumentOutsideOption:B.dropDocumentOutsideOption,direction:D,screenKey:S}})}r===0?w.dropMovementEventSubject.next({state:"remove",targetContainerName:c.containerName,targetParentLayoutName:t,targetLayoutName:e,...A}):w.dropMovementEventSubject.next({state:"remove",targetContainerName:c.containerName,targetParentLayoutName:"",targetLayoutName:e,...A})}},children:c.navigationTitle})},c.navigationTitle+e+c.containerName))},e),(0,i.jsx)(me.default,{})]})}),(p[a]||p[0]).component]})},(p[a]||p[0]).containerName)}):(0,i.jsx)("div",{}),N.length!=0?(0,i.jsx)(i.Fragment,{children:N.map(({containerName:c,component:r,navigationTitle:f,dropDocumentOutsideOption:d,screenKey:x},y)=>(0,i.jsx)(K.default,{containerName:c,isInitialResizable:!0,isResizePanel:y!==N.length-1,children:(0,i.jsx)(V,{parentDirection:D,layoutName:`${e}_after-${u}`,parentLayoutName:e,containerName:c,depth:u+1,rootRef:v,screenKey:x,initialCenterComponents:[{navigationTitle:f,component:r,containerName:c,dropDocumentOutsideOption:d,screenKey:x}],rootName:s})},c))}):(0,i.jsx)("div",{})]}),g&&(0,i.jsx)("div",{className:`${U.default["flex-split-screen-boundary-container"]}`,style:{...g},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})})}
+"use strict";"use client";var De=Object.create;var Z=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var Te=Object.getOwnPropertyNames;var Se=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var Le=(r,t)=>{for(var e in t)Z(r,e,{get:t[e],enumerable:!0})},me=(r,t,e,D)=>{if(t&&typeof t=="object"||typeof t=="function")for(let g of Te(t))!xe.call(r,g)&&g!==e&&Z(r,g,{get:()=>t[g],enumerable:!(D=be(t,g))||D.enumerable});return r};var M=(r,t,e)=>(e=r!=null?De(Se(r)):{},me(t||!r||!r.__esModule?Z(e,"default",{value:r,enumerable:!0}):e,r)),he=r=>me(Z({},"__esModule",{value:!0}),r);var Re={};Le(Re,{default:()=>fe});module.exports=he(Re);var o=require("react/jsx-runtime"),L=require("react"),z=require("../hooks/useDrag"),oe=require("../hooks/useFlexLayoutSplitScreen"),m=require("../store/FlexLayoutContainerStore"),X=M(require("../styles/FlexLayout.module.css"),1),ie=M(require("./FlexLayout"),1),Y=M(require("./FlexLayoutContainer"),1),le=M(require("./FlexLayoutSplitScreenDragBox"),1),ae=M(require("fast-deep-equal/react"),1),J=require("rxjs"),ge=M(require("./FlexLayoutSplitScreenDragBoxContainer"),1),Ce=M(require("./FlexLayoutSplitScreenDragBoxItem"),1),de=M(require("./FlexLayoutSplitScreenDragBoxTitleMore"),1),pe=M(require("./FlexLayoutSplitScreenScrollBox"),1);function $e({x:r,y:t,element:e}){const{x:D,y:g,right:v,bottom:C}=e.getBoundingClientRect();return r<D||r>v||t<g||t>C}function ne({x:r,y:t,element:e}){const{x:D,y:g,right:v,bottom:C}=e.getBoundingClientRect();return r>=D&&r<=v&&t>=g&&t<=C}const re=()=>typeof window<"u"&&window.crypto?Array.from(window.crypto.getRandomValues(new Uint32Array(16)),r=>r.toString(32).padStart(2,"0")).join(""):Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),ee=({orderName:r,parentOrderName:t,containerName:e,parentLayoutName:D,layoutName:g,dropComponent:v,navigationTitle:C,nextContainerName:j,isUsePrefix:d=!0,beforeDropTargetComponent:h,afterDropTargetComponent:B,centerDropTargetComponent:F,dropDocumentOutsideOption:T,screenKey:f=re()})=>{const s=t||r;let I,u,N;s===r||s==="center"?I=r==="before"?{beforeDropTargetComponent:h}:r==="after"?{afterDropTargetComponent:B}:{centerDropTargetComponent:F.filter(p=>!p.containerName.split("_").at(0).startsWith(e.split("_").at(0)))}:I=s==="before"?{beforeDropTargetComponent:h}:{afterDropTargetComponent:B};const _=Object.entries(I)[0];N=_[0],u=_[1];const R={containerName:`${e+"_"+g}${d?"_"+r+"-"+u.length:""}`,component:(0,L.cloneElement)(v,{key:f,screenKey:f}),navigationTitle:C,dropDocumentOutsideOption:T,screenKey:f||re()};let E;if(j){const p=u.findIndex(V=>V.containerName===j);p!==-1?s===r?r==="before"?E=[...u.slice(0,p),R,...u.slice(p)]:E=[...u.slice(0,p+1),R,...u.slice(p+1)]:s==="after"&&r==="before"?E=[...u.slice(0,p),R,...u.slice(p)]:s==="before"&&r==="after"?E=[...u.slice(0,p+1),R,...u.slice(p+1)]:r==="before"?E=[...u.slice(0,p),R,...u.slice(p)]:E=[...u.slice(0,p+1),R,...u.slice(p+1)]:s==="center"&&r==="after"?E=[R,...u]:s==="center"&&r==="before"?E=[...u,R]:E=r==="before"?[R,...u]:[...u,R]}else E=r==="before"?[R,...u]:[...u,R];const A=new Set,G=E.filter(p=>A.has(p.containerName)?!1:(A.add(p.containerName),!0));return z.dropMovementEventSubject.next({state:"append",targetParentLayoutName:D,targetLayoutName:g,targetContainerName:e,orderName:r}),{[N]:G}},H=(r,t,e)=>{const D=r.filter(g=>g.containerName!==t);return D.length!=r.length&&e(r.length-D.length),D};function Oe(r,t){return t+1<r.length?{adjacentItem:r[t+1],adjacentIndex:t+1}:t-1>=0?{adjacentItem:r[t-1],adjacentIndex:t-1}:{adjacentItem:null,adjacentIndex:t}}const ye=r=>{const t=r.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);if(["before","center","after"].some(e=>e===t))return t};function fe({children:r,containerName:t,layoutName:e,navigationTitle:D,dropDocumentOutsideOption:g,screenKey:v,isResetOnChildrenChange:C=!0,isRemoveStoreOnUnmount:j=!0}){const{direction:d,isSplit:h,boundaryContainerSize:B,afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,setAfterDropTargetComponent:s,setBeforeDropTargetComponent:I,setCenterDropTargetComponent:u,layoutRef:N,setIsSplit:_,setDirection:R}=(0,oe.useFlexLayoutSplitScreen)({isSplitInitial:!1,directionInitial:"row",selfContainerName:t,parentLayoutName:"",layoutName:e}),E=(0,L.useRef)(v??re()),A=v??E.current;(0,L.useEffect)(()=>{C&&(0,m.resetRootSplitScreen)(e);const b=(0,m.getSplitScreen)(e,e).subscribe(i=>{if(i){I([...i.beforeDropTargetComponent]),s([...i.afterDropTargetComponent]),u([...i.centerDropTargetComponent]),R(i.direction),(i.beforeDropTargetComponent.length!==0||i.afterDropTargetComponent.length!==0)&&_(!0);return}(0,m.setSplitScreen)(e,e,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[{containerName:t,component:r,navigationTitle:D,dropDocumentOutsideOption:g,screenKey:A}],direction:d})});return()=>{b.unsubscribe(),j&&(0,m.removeRootSplitScreen)(e)}},[e,C]),(0,L.useEffect)(()=>{if(C)return;const b=(0,m.getCurrentSplitScreenComponents)(e,e);if(!b||b.centerDropTargetComponent.length===0)return;const i=b.centerDropTargetComponent[0],S=v??i.screenKey;if(i.screenKey!==S)return;const x={...i,component:r,navigationTitle:D,dropDocumentOutsideOption:g};if(i.component===x.component&&i.navigationTitle===x.navigationTitle&&i.dropDocumentOutsideOption===x.dropDocumentOutsideOption)return;(0,m.setSplitScreen)(e,e,{...b,centerDropTargetComponent:[x]});const P=i.screenKey,a=`${e}_center=${P}`,n=(0,m.getCurrentSplitScreenComponents)(e,a);if(n?.centerDropTargetComponent?.length){const l=n.centerDropTargetComponent.findIndex(c=>c.screenKey===P);if(l!==-1){const c=[...n.centerDropTargetComponent];c[l]={...c[l],component:r,navigationTitle:D,dropDocumentOutsideOption:g},(0,m.setSplitScreen)(e,a,{...n,centerDropTargetComponent:c})}}},[C,e,r,D,g,v]),(0,L.useEffect)(()=>{const b=z.dropMovementEventSubject.pipe((0,J.distinctUntilChanged)((i,S)=>{const x=P=>{const{children:a,component:n,targetComponent:l,x:c,y:$,...O}=P||{};return O};return(0,ae.default)(x(i),x(S))})).subscribe(i=>{if(i.state==="remove")(i.targetParentLayoutName===e||i.targetParentLayoutName===""&&i.targetLayoutName===e)&&requestAnimationFrame(()=>{let S=l=>{if(i.nextContainerName&&i.dropTargetComponentEvent&&i.targetComponent){const c=ee({orderName:l,containerName:i.nextContainerName,parentLayoutName:"",layoutName:e,dropComponent:i.targetComponent,navigationTitle:i.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,dropDocumentOutsideOption:g,screenKey:i.dropTargetComponentEvent.screenKey});(0,m.setSplitScreen)(e,e,{...(0,m.getCurrentSplitScreenComponents)(e,e)||{afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,direction:d},...c}),Promise.resolve().then(()=>i.dropEndCallback&&i.dropEndCallback({x:i.x,y:i.y,containerName:t}))}};const x=(0,m.getCurrentSplitScreenComponents)(e,e),P=H(x?.afterDropTargetComponent||F,i.targetContainerName,()=>S("after")),a=H(x?.beforeDropTargetComponent||T,i.targetContainerName,()=>S("before")),n=H(x?.centerDropTargetComponent||f,i.targetContainerName,()=>S("center"));(0,m.setSplitScreen)(e,e,{afterDropTargetComponent:P,beforeDropTargetComponent:a,centerDropTargetComponent:n,direction:d})});else if(i.state==="append"){const{x:S,y:x,dropEndCallback:P,dropTargetComponentEvent:a,orderName:n,parentOrderName:l,targetLayoutName:c,targetParentLayoutName:$,targetContainerName:O,targetComponent:y,nextContainerName:K}=i;if(N.current&&n&&S&&x&&y&&a&&c===e&&ne({x:S,y:x,element:N.current})){const{direction:k,navigationTitle:U,dropDocumentOutsideOption:w}=a,Q=n!=="center",te=n==="center"&&f.length<=1;if(Q||te)if(_(!0),Q){R(k);const q=ee({orderName:n,parentOrderName:l,containerName:O,nextContainerName:K,dropComponent:y,parentLayoutName:"",layoutName:e,navigationTitle:U,isUsePrefix:!0,afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,dropDocumentOutsideOption:w});(0,m.setSplitScreen)(e,e,{afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,direction:k,...q,direction:k}),Promise.resolve().then(()=>P&&P({x:i.x,y:i.y,containerName:t}))}else{const q=(0,m.getCurrentSplitScreenComponents)(e,`${e}_center=${f[0].screenKey}`)||{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[],direction:d};(0,m.setSplitScreen)(e,`${e}_center=${f[0].screenKey}`,{...q,centerDropTargetComponent:[f[0],{containerName:`${O}_${e}_${n}`,component:y,dropDocumentOutsideOption:w,screenKey:a.screenKey,navigationTitle:U}]})}}}});return()=>{b.unsubscribe()}},[d,e,h,T,F,f]);const G={containerName:t,component:r,navigationTitle:D,dropDocumentOutsideOption:g,screenKey:A},p=f[0]??G,V=f.length>0;return(0,o.jsxs)("div",{className:`${X.default["flex-split-screen"]}`,ref:N,children:[(0,o.jsxs)(ie.default,{direction:d,layoutName:e,"data-is_split":h,panelMovementMode:"bulldozer",children:[T.length!=0?(0,o.jsx)(o.Fragment,{children:T.map(({containerName:b,component:i,navigationTitle:S,dropDocumentOutsideOption:x,screenKey:P},a)=>(0,o.jsx)(Y.default,{containerName:b,isInitialResizable:!0,isResizePanel:!0,children:(0,o.jsx)(W,{parentDirection:d,layoutName:`${e}_before`,parentLayoutName:e,containerName:b,depth:1,rootRef:N,screenKey:P,initialCenterComponents:[{navigationTitle:S,component:i,containerName:b,dropDocumentOutsideOption:x,screenKey:P}],rootName:e})},b))}):(0,o.jsx)("div",{}),(0,o.jsx)(Y.default,{containerName:`${p.containerName}`,isInitialResizable:!0,isResizePanel:h,children:V&&h?(0,o.jsx)(W,{parentDirection:d,layoutName:`${e}_center`,parentLayoutName:e,containerName:p.containerName,depth:0,rootRef:N,screenKey:p.screenKey,initialCenterComponents:[{navigationTitle:p.navigationTitle,component:p.component,containerName:p.containerName,dropDocumentOutsideOption:p.dropDocumentOutsideOption,screenKey:p.screenKey}],rootName:e}):(0,o.jsx)(pe.default,{keyName:p.containerName,isDefaultScrollStyle:!0,children:p.component})}),F.length!=0?(0,o.jsx)(o.Fragment,{children:F.map(({containerName:b,component:i,navigationTitle:S,dropDocumentOutsideOption:x,screenKey:P},a)=>(0,o.jsx)(Y.default,{containerName:b,isInitialResizable:!0,isResizePanel:F.length-1!==a,children:(0,o.jsx)(W,{parentDirection:d,layoutName:`${e}_after`,parentLayoutName:e,containerName:b,depth:1,rootRef:N,screenKey:P,initialCenterComponents:[{navigationTitle:S,component:i,containerName:b,dropDocumentOutsideOption:x,screenKey:P}],rootName:e})},b))}):(0,o.jsx)("div",{})]}),B&&(0,o.jsx)("div",{className:`${X.default["flex-split-screen-boundary-container"]}`,style:{...B},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})}function W({containerName:r,layoutName:t,parentLayoutName:e,parentDirection:D,depth:g,rootRef:v,rootName:C,initialCenterComponents:j,screenKey:d}){const{direction:h,isSplit:B,boundaryContainerSize:F,afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,setAfterDropTargetComponent:I,setBeforeDropTargetComponent:u,setCenterDropTargetComponent:N,layoutRef:_,setIsSplit:R,setDirection:E}=(0,oe.useFlexLayoutSplitScreen)({isSplitInitial:!1,directionInitial:"row",parentDirection:D,selfContainerName:r,parentLayoutName:e,layoutName:t}),[A,G]=(0,L.useState)(!1),[p,V]=(0,L.useState)(0),b=(0,L.useRef)(s),i=(0,L.useRef)(j??[]),S=(0,L.useRef)(p);(0,L.useEffect)(()=>{const a=`${t}=${d}`,n=(0,m.getSplitScreen)(C,a).pipe((0,J.take)(1)).subscribe(l=>{l||(0,m.setSplitScreen)(C,a,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:i.current,direction:h})});return()=>{(0,m.removeSplitScreenChild)(C,`${t}=${d}`),n.unsubscribe()}},[C,t,d]),(0,L.useEffect)(()=>{const a=(0,m.getSplitScreen)(C,`${t}=${d}`).subscribe(n=>{n&&(u([...n.beforeDropTargetComponent]),I([...n.afterDropTargetComponent]),N([...n.centerDropTargetComponent]),E(n.direction),n.beforeDropTargetComponent.length!==0||n.afterDropTargetComponent.length!==0?R(!0):n.beforeDropTargetComponent.length===0&&n.centerDropTargetComponent.length===0&&n.afterDropTargetComponent.length===0&&(z.dropMovementEventSubject.next({state:"remove",targetContainerName:r,targetParentLayoutName:"",targetLayoutName:e}),G(!0)))});return()=>{a.unsubscribe(),(0,m.removeRootSplitScreen)(t)}},[C,t]),(0,L.useEffect)(()=>{const a=z.dropMovementEventSubject.pipe((0,J.distinctUntilChanged)((n,l)=>{const c=$=>{const{children:O,component:y,targetComponent:K,x:k,y:U,...w}=$||{};return w};return(0,ae.default)(c(n),c(l))})).subscribe(n=>{if(n.state==="remove")(n.targetParentLayoutName===t||n.targetParentLayoutName===""&&n.targetLayoutName===t)&&requestAnimationFrame(()=>{let l=K=>{if(n.nextContainerName&&n.dropTargetComponentEvent&&n.targetComponent){const k=ee({orderName:K,containerName:n.nextContainerName,parentLayoutName:e,layoutName:t,dropComponent:n.targetComponent,navigationTitle:n.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,dropDocumentOutsideOption:n.dropTargetComponentEvent?.dropDocumentOutsideOption,screenKey:n.dropTargetComponentEvent.screenKey});(0,m.setSplitScreen)(C,`${t}=${d}`,{...(0,m.getCurrentSplitScreenComponents)(C,`${t}=${d}`)||{afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,direction:h},...k}),Promise.resolve().then(()=>n.dropEndCallback&&n.dropEndCallback({x:n.x,y:n.y,containerName:r}))}};const c=(0,m.getCurrentSplitScreenComponents)(C,`${t}=${d}`),$=H(c?.afterDropTargetComponent||T,n.targetContainerName,()=>l("after")),O=H(c?.beforeDropTargetComponent||f,n.targetContainerName,()=>l("before")),y=H(c?.centerDropTargetComponent||s,n.targetContainerName,()=>l("center"));(0,m.setSplitScreen)(C,`${t}=${d}`,{afterDropTargetComponent:$,beforeDropTargetComponent:O,centerDropTargetComponent:y,direction:h})});else if(n.state==="append"){const{x:l,y:c,dropEndCallback:$,dropTargetComponentEvent:O,orderName:y,targetLayoutName:K,targetParentLayoutName:k,targetContainerName:U,targetComponent:w,nextContainerName:Q,parentOrderName:te}=n;if(_.current&&y&&l&&c&&O&&ne({x:l,y:c,element:_.current})){const{direction:q,navigationTitle:se,dropDocumentOutsideOption:ce,screenKey:ve}=O;if(K===t&&w)if(q===D&&y!=="center")z.dropMovementEventSubject.next({state:"append",targetContainerName:U,targetParentLayoutName:"",targetLayoutName:e,targetComponent:w,nextContainerName:r,parentOrderName:ye(t)||y,orderName:y,x:l,y:c,dropEndCallback:$,dropTargetComponentEvent:{navigationTitle:se,dropDocumentOutsideOption:ce,direction:D,screenKey:d}});else{y!=="center"&&(E(q),R(!0));const ue=ee({orderName:y,parentOrderName:te,containerName:U,nextContainerName:Q,parentLayoutName:e,layoutName:t,dropComponent:w,navigationTitle:se,isUsePrefix:y!=="center",afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,dropDocumentOutsideOption:ce});(0,m.setSplitScreen)(C,`${t}=${d}`,{...(0,m.getCurrentSplitScreenComponents)(C,`${t}=${d}`)||{afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,direction:h},...ue,direction:q}),Promise.resolve().then(()=>n.dropEndCallback&&n.dropEndCallback({x:n.x,y:n.y,containerName:r}))}}}});return()=>{a.unsubscribe()}},[h,D,e,t,f,T,s]),(0,L.useEffect)(()=>{b.current=s},[s]),(0,L.useEffect)(()=>{S.current=p},[p]);const[x,P]=(0,L.useState)(!1);return(0,o.jsx)(o.Fragment,{children:!A&&(0,o.jsxs)("div",{className:`${X.default["flex-split-screen"]}`,ref:_,children:[(0,o.jsxs)(ie.default,{direction:h,layoutName:`${t}`,panelMovementMode:"bulldozer",children:[f.length!=0?(0,o.jsx)(o.Fragment,{children:f.map(({containerName:a,component:n,navigationTitle:l,dropDocumentOutsideOption:c,screenKey:$},O)=>(0,o.jsx)(Y.default,{containerName:a,isInitialResizable:!0,isResizePanel:!0,children:(0,o.jsx)(W,{parentDirection:h,layoutName:`${t}_before-${g}`,parentLayoutName:t,containerName:a,depth:g+1,rootRef:v,screenKey:$,initialCenterComponents:[{navigationTitle:l,component:n,containerName:a,dropDocumentOutsideOption:c,screenKey:$}],rootName:C})},a))}):(0,o.jsx)("div",{}),s.length!=0?(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(Y.default,{containerName:`${(s[p]||s[0]).containerName}`,isInitialResizable:!0,isResizePanel:B,children:B?(0,o.jsx)("div",{"data-key":d,children:(0,o.jsx)(W,{parentDirection:h,layoutName:`${t}_center-${g}`,parentLayoutName:t,containerName:`${(s[p]||s[0]).containerName}`,depth:g+1,rootRef:v,initialCenterComponents:s.map(({navigationTitle:a,component:n,containerName:l,dropDocumentOutsideOption:c,screenKey:$})=>({navigationTitle:a,component:n,containerName:l,dropDocumentOutsideOption:c,screenKey:$})),screenKey:d,rootName:C})}):(0,o.jsxs)(pe.default,{keyName:(s[p]||s[0]).containerName,isDefaultScrollStyle:!0,children:[!x&&(0,o.jsx)("div",{className:`${X.default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,children:(0,o.jsxs)("div",{"data-is_split":B,"data-layout_name":t,"data-parent_layout_name":e,"data-container_name":`${(s[p]||s[0]).containerName}`,className:`${X.default["flex-split-screen-drag-box-title-wrapper"]}`,children:[(0,o.jsx)(ge.default,{"data-layout_name":t,layoutName:t,children:s.map((a,n)=>(0,o.jsx)(Ce.default,{onClose:l=>{S.current===n&&s.length===1?z.dropMovementEventSubject.next({state:"remove",targetContainerName:r,targetParentLayoutName:e,targetLayoutName:t}):(s.length===S.current+1&&V(S.current-1),N(c=>{const $=H(c,a.containerName,()=>{}),O=`${t}=${d}`,y=(0,m.getCurrentSplitScreenComponents)(C,O)||{afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:c,direction:h};return(0,m.setSplitScreen)(C,O,{...y,centerDropTargetComponent:$}),$}))},isActive:p===n,children:(0,o.jsx)(le.default,{screenKey:a.screenKey,onClick:()=>{V(n)},containerName:a.containerName,dropDocumentOutsideOption:a.dropDocumentOutsideOption,targetComponent:a.component,navigationTitle:a.navigationTitle,"data-container-name":a.containerName,"data-layout-name":t,"data-parent-layout-name":e,dropEndCallback:({x:l,y:c,containerName:$})=>{if(!v.current||!_.current)return;const O=$e({x:l,y:c,element:v.current}),y=ne({x:l,y:c,element:_.current});if(!O&&!y||!O&&y&&b.current.length>1){const K={};if(b.current.length>1){const{adjacentItem:k,adjacentIndex:U}=Oe(b.current,S.current);k&&S.current===n&&Object.assign(K,{x:l,y:c,targetComponent:k.component,nextContainerName:k.containerName,orderName:"center",dropTargetComponentEvent:{navigationTitle:k.navigationTitle,dropDocumentOutsideOption:k.dropDocumentOutsideOption,direction:h,screenKey:d}})}n===0?z.dropMovementEventSubject.next({state:"remove",targetContainerName:a.containerName,targetParentLayoutName:e,targetLayoutName:t,...K}):z.dropMovementEventSubject.next({state:"remove",targetContainerName:a.containerName,targetParentLayoutName:"",targetLayoutName:t,...K})}},children:a.navigationTitle})},a.navigationTitle+t+a.containerName))},t),(0,o.jsx)(de.default,{})]})}),(s[p]||s[0]).component]})},(s[p]||s[0]).containerName)}):(0,o.jsx)("div",{}),T.length!=0?(0,o.jsx)(o.Fragment,{children:T.map(({containerName:a,component:n,navigationTitle:l,dropDocumentOutsideOption:c,screenKey:$},O)=>(0,o.jsx)(Y.default,{containerName:a,isInitialResizable:!0,isResizePanel:O!==T.length-1,children:(0,o.jsx)(W,{parentDirection:h,layoutName:`${t}_after-${g}`,parentLayoutName:t,containerName:a,depth:g+1,rootRef:v,screenKey:$,initialCenterComponents:[{navigationTitle:l,component:n,containerName:a,dropDocumentOutsideOption:c,screenKey:$}],rootName:C})},a))}):(0,o.jsx)("div",{})]}),F&&(0,o.jsx)("div",{className:`${X.default["flex-split-screen-boundary-container"]}`,style:{...F},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})})}

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

@@ -7,5 +7,18 @@ export type FlexLayoutSplitScreenProps = {
     navigationTitle: string;
     dropDocumentOutsideOption?: DropDocumentOutsideOption;
     screenKey?: string;
+    /**
+     * true = children이 바뀌면 store 리셋/삭제
+     * false = 분할 상태 유지 및 children 변경 시 center 컴포넌트만 store에 덮어써서 최신화
+     * default = true
+     */
+    isResetOnChildrenChange?: boolean;
+    /**
+     * FlexLayoutSplitScreen 컴포넌트가 화면에서 완전히 사라질 때 store를 같이 지울지 말지 선택
+     * true = FlexLayoutSplitScreen의 컴포넌트 생명주기와 store의 생명주기 동기화
+     * false = FlexLayoutSplitScreen의 컴포넌트가 언마운트되어도 나중에 다시 페이지에 돌아왔을 때 복원가능해야 하는 경우
+     * default = true
+     */
+    isRemoveStoreOnUnmount?: boolean;
 };
-export default function FlexLayoutSplitScreen({ children, containerName, layoutName, navigationTitle, dropDocumentOutsideOption, screenKey, }: FlexLayoutSplitScreenProps): import("react/jsx-runtime").JSX.Element;
+export default function FlexLayoutSplitScreen({ children, containerName, layoutName, navigationTitle, dropDocumentOutsideOption, screenKey, isResetOnChildrenChange, isRemoveStoreOnUnmount, }: FlexLayoutSplitScreenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-"use client";import{Fragment as X,jsx as c,jsxs as Y}from"react/jsx-runtime";import{cloneElement as fe,useEffect as M,useRef as ee,useState as te}from"react";import{dropMovementEventSubject as z}from"../hooks/useDrag";import{useFlexLayoutSplitScreen as ae}from"../hooks/useFlexLayoutSplitScreen";import{getCurrentSplitScreenComponents as A,getSplitScreen as ne,removeRootSplitScreen as pe,removeSplitScreenChild as ue,resetRootSplitScreen as De,setSplitScreen as F}from"../store/FlexLayoutContainerStore";import q from"../styles/FlexLayout.module.css";import se from"./FlexLayout";import H from"./FlexLayoutContainer";import be from"./FlexLayoutSplitScreenDragBox";import ce from"fast-deep-equal";import{distinctUntilChanged as le,take as Te}from"rxjs";import Se from"./FlexLayoutSplitScreenDragBoxContainer";import xe from"./FlexLayoutSplitScreenDragBoxItem";import Le from"./FlexLayoutSplitScreenDragBoxTitleMore";import me from"./FlexLayoutSplitScreenScrollBox";function he({x:o,y:e,element:t}){const{x:L,y:S,right:$,bottom:p}=t.getBoundingClientRect();return o<L||o>$||e<S||e>p}function re({x:o,y:e,element:t}){const{x:L,y:S,right:$,bottom:p}=t.getBoundingClientRect();return o>=L&&o<=$&&e>=S&&e<=p}const Q=({orderName:o,parentOrderName:e,containerName:t,parentLayoutName:L,layoutName:S,dropComponent:$,navigationTitle:p,nextContainerName:P,isUsePrefix:D=!0,beforeDropTargetComponent:f,afterDropTargetComponent:y,centerDropTargetComponent:m,dropDocumentOutsideOption:R,screenKey:v=Array.from(window.crypto.getRandomValues(new Uint32Array(16)),a=>a.toString(32).padStart(2,"0")).join("")})=>{const a=e||o;let N,g,B;a===o||a==="center"?N=o==="before"?{beforeDropTargetComponent:f}:o==="after"?{afterDropTargetComponent:y}:{centerDropTargetComponent:m.filter(i=>!i.containerName.split("_").at(0).startsWith(t.split("_").at(0)))}:N=a==="before"?{beforeDropTargetComponent:f}:{afterDropTargetComponent:y};const u=Object.entries(N)[0];B=u[0],g=u[1];const r={containerName:`${t+"_"+S}${D?"_"+o+"-"+g.length:""}`,component:fe($,{key:v,screenKey:v}),navigationTitle:p,dropDocumentOutsideOption:R,screenKey:v||Array.from(window.crypto.getRandomValues(new Uint32Array(16)),i=>i.toString(32).padStart(2,"0")).join("")};let l;if(P){const i=g.findIndex(E=>E.containerName===P);i!==-1?a===o?o==="before"?l=[...g.slice(0,i),r,...g.slice(i)]:l=[...g.slice(0,i+1),r,...g.slice(i+1)]:a==="after"&&o==="before"?l=[...g.slice(0,i),r,...g.slice(i)]:a==="before"&&o==="after"?l=[...g.slice(0,i+1),r,...g.slice(i+1)]:o==="before"?l=[...g.slice(0,i),r,...g.slice(i)]:l=[...g.slice(0,i+1),r,...g.slice(i+1)]:a==="center"&&o==="after"?l=[r,...g]:a==="center"&&o==="before"?l=[...g,r]:l=o==="before"?[r,...g]:[...g,r]}else l=o==="before"?[r,...g]:[...g,r];const x=new Set,h=l.filter(i=>x.has(i.containerName)?!1:(x.add(i.containerName),!0));return z.next({state:"append",targetParentLayoutName:L,targetLayoutName:S,targetContainerName:t,orderName:o}),{[B]:h}},I=(o,e,t)=>{const L=o.filter(S=>S.containerName!==e);return L.length!=o.length&&t(o.length-L.length),L};function Oe(o,e){return e+1<o.length?{adjacentItem:o[e+1],adjacentIndex:e+1}:e-1>=0?{adjacentItem:o[e-1],adjacentIndex:e-1}:{adjacentItem:null,adjacentIndex:e}}const $e=o=>{const e=o.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);if(["before","center","after"].some(t=>t===e))return e};function ye({children:o,containerName:e,layoutName:t,navigationTitle:L,dropDocumentOutsideOption:S,screenKey:$}){const{direction:p,isSplit:P,boundaryContainerSize:D,afterDropTargetComponent:f,beforeDropTargetComponent:y,centerDropTargetComponent:m,setAfterDropTargetComponent:R,setBeforeDropTargetComponent:v,setCenterDropTargetComponent:a,layoutRef:N,setIsSplit:g,setDirection:B}=ae({isSplitInitial:!1,directionInitial:"row",selfContainerName:e,parentLayoutName:"",layoutName:t});return M(()=>{De(t);const u=ne(t,t).subscribe(r=>{r?(v([...r.beforeDropTargetComponent]),R([...r.afterDropTargetComponent]),a([...r.centerDropTargetComponent]),B(r.direction),(r.beforeDropTargetComponent.length!==0||r.afterDropTargetComponent.length!==0)&&g(!0)):F(t,t,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[{containerName:e,component:o,navigationTitle:L,dropDocumentOutsideOption:S,screenKey:$||Array.from(window.crypto.getRandomValues(new Uint32Array(16)),l=>l.toString(32).padStart(2,"0")).join("")}],direction:p})});return()=>{u.unsubscribe(),pe(t)}},[t,$,L,o,p]),M(()=>{const u=z.pipe(le((r,l)=>{const x=h=>{const{children:i,component:E,targetComponent:k,x:U,y:j,...K}=h||{};return K};return ce(x(r),x(l))})).subscribe(r=>{if(r.state==="remove")(r.targetParentLayoutName===t||r.targetParentLayoutName===""&&r.targetLayoutName===t)&&requestAnimationFrame(()=>{let l=k=>{if(r.nextContainerName&&r.dropTargetComponentEvent&&r.targetComponent){const U=Q({orderName:k,containerName:r.nextContainerName,parentLayoutName:"",layoutName:t,dropComponent:r.targetComponent,navigationTitle:r.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:f,beforeDropTargetComponent:y,centerDropTargetComponent:m,dropDocumentOutsideOption:S,screenKey:r.dropTargetComponentEvent.screenKey});F(t,t,{...A(t,t)||{afterDropTargetComponent:f,beforeDropTargetComponent:y,centerDropTargetComponent:m,direction:p},...U}),Promise.resolve().then(()=>r.dropEndCallback&&r.dropEndCallback({x:r.x,y:r.y,containerName:e}))}};const x=A(t,t),h=I(x?.afterDropTargetComponent||f,r.targetContainerName,()=>l("after")),i=I(x?.beforeDropTargetComponent||y,r.targetContainerName,()=>l("before")),E=I(x?.centerDropTargetComponent||m,r.targetContainerName,()=>l("center"));F(t,t,{afterDropTargetComponent:h,beforeDropTargetComponent:i,centerDropTargetComponent:E,direction:p})});else if(r.state==="append"){const{x:l,y:x,dropEndCallback:h,dropTargetComponentEvent:i,orderName:E,parentOrderName:k,targetLayoutName:U,targetParentLayoutName:j,targetContainerName:K,targetComponent:G,nextContainerName:s}=r;if(N.current&&E&&l&&x&&G&&i&&U===t&&re({x:l,y:x,element:N.current})){const{direction:n,navigationTitle:d,dropDocumentOutsideOption:C}=i,b=E!=="center",O=E==="center"&&m.length<=1;if(b||O)if(g(!0),b){B(n);const T=Q({orderName:E,parentOrderName:k,containerName:K,nextContainerName:s,dropComponent:G,parentLayoutName:"",layoutName:t,navigationTitle:d,isUsePrefix:!0,afterDropTargetComponent:f,beforeDropTargetComponent:y,centerDropTargetComponent:m,dropDocumentOutsideOption:C});F(t,t,{afterDropTargetComponent:f,beforeDropTargetComponent:y,centerDropTargetComponent:m,direction:n,...T,direction:n}),Promise.resolve().then(()=>h&&h({x:r.x,y:r.y,containerName:e}))}else{const T=A(t,`${t}_center=${m[0].screenKey}`)||{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[],direction:p};F(t,`${t}_center=${m[0].screenKey}`,{...T,centerDropTargetComponent:[m[0],{containerName:`${K}_${t}_${E}`,component:G,dropDocumentOutsideOption:C,screenKey:i.screenKey,navigationTitle:d}]})}}}});return()=>{u.unsubscribe()}},[p,t,P,y,f,m]),Y("div",{className:`${q["flex-split-screen"]}`,ref:N,children:[Y(se,{direction:p,layoutName:t,"data-is_split":P,panelMovementMode:"bulldozer",children:[y.length!=0?c(X,{children:y.map(({containerName:u,component:r,navigationTitle:l,dropDocumentOutsideOption:x,screenKey:h},i)=>c(H,{containerName:u,isInitialResizable:!0,isResizePanel:!0,children:c(V,{parentDirection:p,layoutName:`${t}_before`,parentLayoutName:t,containerName:u,depth:1,rootRef:N,screenKey:h,initialCenterComponents:[{navigationTitle:l,component:r,containerName:u,dropDocumentOutsideOption:x,screenKey:h}],rootName:t})},u))}):c("div",{}),m.length===0?c("div",{}):c(H,{containerName:`${m[0].containerName}`,isInitialResizable:!0,isResizePanel:P,children:P?c(V,{parentDirection:p,layoutName:`${t}_center`,parentLayoutName:t,containerName:`${m[0].containerName}`,depth:0,rootRef:N,screenKey:m[0].screenKey,initialCenterComponents:[{navigationTitle:m[0].navigationTitle,component:m[0].component,containerName:m[0].containerName,dropDocumentOutsideOption:m[0].dropDocumentOutsideOption,screenKey:m[0].screenKey}],rootName:t}):c(me,{keyName:m[0].containerName,isDefaultScrollStyle:!0,children:m[0].component})}),f.length!=0?c(X,{children:f.map(({containerName:u,component:r,navigationTitle:l,dropDocumentOutsideOption:x,screenKey:h},i)=>c(H,{containerName:u,isInitialResizable:!0,isResizePanel:f.length-1!==i,children:c(V,{parentDirection:p,layoutName:`${t}_after`,parentLayoutName:t,containerName:u,depth:1,rootRef:N,screenKey:h,initialCenterComponents:[{navigationTitle:l,component:r,containerName:u,dropDocumentOutsideOption:x,screenKey:h}],rootName:t})},u))}):c("div",{})]}),D&&c("div",{className:`${q["flex-split-screen-boundary-container"]}`,style:{...D},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})}function V({containerName:o,layoutName:e,parentLayoutName:t,parentDirection:L,depth:S,rootRef:$,rootName:p,initialCenterComponents:P,screenKey:D}){const{direction:f,isSplit:y,boundaryContainerSize:m,afterDropTargetComponent:R,beforeDropTargetComponent:v,centerDropTargetComponent:a,setAfterDropTargetComponent:N,setBeforeDropTargetComponent:g,setCenterDropTargetComponent:B,layoutRef:u,setIsSplit:r,setDirection:l}=ae({isSplitInitial:!1,directionInitial:"row",parentDirection:L,selfContainerName:o,parentLayoutName:t,layoutName:e}),[x,h]=te(!1),[i,E]=te(0),k=ee(a),U=ee(P??[]),j=ee(i);M(()=>{const s=`${e}=${D}`,n=ne(p,s).pipe(Te(1)).subscribe(d=>{d||F(p,s,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:U.current,direction:f})});return()=>{ue(p,`${e}=${D}`),n.unsubscribe()}},[p,e,D]),M(()=>{const s=ne(p,`${e}=${D}`).subscribe(n=>{n&&(g([...n.beforeDropTargetComponent]),N([...n.afterDropTargetComponent]),B([...n.centerDropTargetComponent]),l(n.direction),n.beforeDropTargetComponent.length!==0||n.afterDropTargetComponent.length!==0?r(!0):n.beforeDropTargetComponent.length===0&&n.centerDropTargetComponent.length===0&&n.afterDropTargetComponent.length===0&&(z.next({state:"remove",targetContainerName:o,targetParentLayoutName:"",targetLayoutName:t}),h(!0)))});return()=>{s.unsubscribe(),pe(e)}},[p,e]),M(()=>{const s=z.pipe(le((n,d)=>{const C=b=>{const{children:O,component:T,targetComponent:w,x:_,y:J,...W}=b||{};return W};return ce(C(n),C(d))})).subscribe(n=>{if(n.state==="remove")(n.targetParentLayoutName===e||n.targetParentLayoutName===""&&n.targetLayoutName===e)&&requestAnimationFrame(()=>{let d=w=>{if(n.nextContainerName&&n.dropTargetComponentEvent&&n.targetComponent){const _=Q({orderName:w,containerName:n.nextContainerName,parentLayoutName:t,layoutName:e,dropComponent:n.targetComponent,navigationTitle:n.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:R,beforeDropTargetComponent:v,centerDropTargetComponent:a,dropDocumentOutsideOption:n.dropTargetComponentEvent?.dropDocumentOutsideOption,screenKey:n.dropTargetComponentEvent.screenKey});F(p,`${e}=${D}`,{...A(p,`${e}=${D}`)||{afterDropTargetComponent:R,beforeDropTargetComponent:v,centerDropTargetComponent:a,direction:f},..._}),Promise.resolve().then(()=>n.dropEndCallback&&n.dropEndCallback({x:n.x,y:n.y,containerName:o}))}};const C=A(p,`${e}=${D}`),b=I(C?.afterDropTargetComponent||R,n.targetContainerName,()=>d("after")),O=I(C?.beforeDropTargetComponent||v,n.targetContainerName,()=>d("before")),T=I(C?.centerDropTargetComponent||a,n.targetContainerName,()=>d("center"));F(p,`${e}=${D}`,{afterDropTargetComponent:b,beforeDropTargetComponent:O,centerDropTargetComponent:T,direction:f})});else if(n.state==="append"){const{x:d,y:C,dropEndCallback:b,dropTargetComponentEvent:O,orderName:T,targetLayoutName:w,targetParentLayoutName:_,targetContainerName:J,targetComponent:W,nextContainerName:ge,parentOrderName:Ce}=n;if(u.current&&T&&d&&C&&O&&re({x:d,y:C,element:u.current})){const{direction:Z,navigationTitle:oe,dropDocumentOutsideOption:ie,screenKey:ve}=O;if(w===e&&W)if(Z===L&&T!=="center")z.next({state:"append",targetContainerName:J,targetParentLayoutName:"",targetLayoutName:t,targetComponent:W,nextContainerName:o,parentOrderName:$e(e)||T,orderName:T,x:d,y:C,dropEndCallback:b,dropTargetComponentEvent:{navigationTitle:oe,dropDocumentOutsideOption:ie,direction:L,screenKey:D}});else{T!=="center"&&(l(Z),r(!0));const de=Q({orderName:T,parentOrderName:Ce,containerName:J,nextContainerName:ge,parentLayoutName:t,layoutName:e,dropComponent:W,navigationTitle:oe,isUsePrefix:T!=="center",afterDropTargetComponent:R,beforeDropTargetComponent:v,centerDropTargetComponent:a,dropDocumentOutsideOption:ie});F(p,`${e}=${D}`,{...A(p,`${e}=${D}`)||{afterDropTargetComponent:R,beforeDropTargetComponent:v,centerDropTargetComponent:a,direction:f},...de,direction:Z}),Promise.resolve().then(()=>n.dropEndCallback&&n.dropEndCallback({x:n.x,y:n.y,containerName:o}))}}}});return()=>{s.unsubscribe()}},[f,L,t,e,v,R,a]),M(()=>{k.current=a},[a]),M(()=>{j.current=i},[i]);const[K,G]=te(!1);return c(X,{children:!x&&Y("div",{className:`${q["flex-split-screen"]}`,ref:u,children:[Y(se,{direction:f,layoutName:`${e}`,panelMovementMode:"bulldozer",children:[v.length!=0?c(X,{children:v.map(({containerName:s,component:n,navigationTitle:d,dropDocumentOutsideOption:C,screenKey:b},O)=>c(H,{containerName:s,isInitialResizable:!0,isResizePanel:!0,children:c(V,{parentDirection:f,layoutName:`${e}_before-${S}`,parentLayoutName:e,containerName:s,depth:S+1,rootRef:$,screenKey:b,initialCenterComponents:[{navigationTitle:d,component:n,containerName:s,dropDocumentOutsideOption:C,screenKey:b}],rootName:p})},s))}):c("div",{}),a.length!=0?c(X,{children:c(H,{containerName:`${(a[i]||a[0]).containerName}`,isInitialResizable:!0,isResizePanel:y,children:y?c("div",{"data-key":D,children:c(V,{parentDirection:f,layoutName:`${e}_center-${S}`,parentLayoutName:e,containerName:`${(a[i]||a[0]).containerName}`,depth:S+1,rootRef:$,initialCenterComponents:a.map(({navigationTitle:s,component:n,containerName:d,dropDocumentOutsideOption:C,screenKey:b})=>({navigationTitle:s,component:n,containerName:d,dropDocumentOutsideOption:C,screenKey:b})),screenKey:D,rootName:p})}):Y(me,{keyName:(a[i]||a[0]).containerName,isDefaultScrollStyle:!0,children:[!K&&c("div",{className:`${q["flex-split-screen-drag-box-title-wrapper-sticky"]}`,children:Y("div",{"data-is_split":y,"data-layout_name":e,"data-parent_layout_name":t,"data-container_name":`${(a[i]||a[0]).containerName}`,className:`${q["flex-split-screen-drag-box-title-wrapper"]}`,children:[c(Se,{"data-layout_name":e,layoutName:e,children:a.map((s,n)=>c(xe,{onClose:d=>{j.current===n&&a.length===1?z.next({state:"remove",targetContainerName:o,targetParentLayoutName:t,targetLayoutName:e}):(a.length===j.current+1&&E(j.current-1),B(C=>{const b=I(C,s.containerName,()=>{}),O=`${e}=${D}`,T=A(p,O)||{afterDropTargetComponent:R,beforeDropTargetComponent:v,centerDropTargetComponent:C,direction:f};return F(p,O,{...T,centerDropTargetComponent:b}),b}))},isActive:i===n,children:c(be,{screenKey:s.screenKey,onClick:()=>{E(n)},containerName:s.containerName,dropDocumentOutsideOption:s.dropDocumentOutsideOption,targetComponent:s.component,navigationTitle:s.navigationTitle,"data-container-name":s.containerName,"data-layout-name":e,"data-parent-layout-name":t,dropEndCallback:({x:d,y:C,containerName:b})=>{if(!$.current||!u.current)return;const O=he({x:d,y:C,element:$.current}),T=re({x:d,y:C,element:u.current});if(!O&&!T||!O&&T&&k.current.length>1){const w={};if(k.current.length>1){const{adjacentItem:_,adjacentIndex:J}=Oe(k.current,j.current);_&&j.current===n&&Object.assign(w,{x:d,y:C,targetComponent:_.component,nextContainerName:_.containerName,orderName:"center",dropTargetComponentEvent:{navigationTitle:_.navigationTitle,dropDocumentOutsideOption:_.dropDocumentOutsideOption,direction:f,screenKey:D}})}n===0?z.next({state:"remove",targetContainerName:s.containerName,targetParentLayoutName:t,targetLayoutName:e,...w}):z.next({state:"remove",targetContainerName:s.containerName,targetParentLayoutName:"",targetLayoutName:e,...w})}},children:s.navigationTitle})},s.navigationTitle+e+s.containerName))},e),c(Le,{})]})}),(a[i]||a[0]).component]})},(a[i]||a[0]).containerName)}):c("div",{}),R.length!=0?c(X,{children:R.map(({containerName:s,component:n,navigationTitle:d,dropDocumentOutsideOption:C,screenKey:b},O)=>c(H,{containerName:s,isInitialResizable:!0,isResizePanel:O!==R.length-1,children:c(V,{parentDirection:f,layoutName:`${e}_after-${S}`,parentLayoutName:e,containerName:s,depth:S+1,rootRef:$,screenKey:b,initialCenterComponents:[{navigationTitle:d,component:n,containerName:s,dropDocumentOutsideOption:C,screenKey:b}],rootName:p})},s))}):c("div",{})]}),m&&c("div",{className:`${q["flex-split-screen-boundary-container"]}`,style:{...m},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})})}export{ye as default};
+"use client";import{Fragment as G,jsx as c,jsxs as J}from"react/jsx-runtime";import{cloneElement as ue,useEffect as j,useRef as ee,useState as re}from"react";import{dropMovementEventSubject as w}from"../hooks/useDrag";import{useFlexLayoutSplitScreen as ce}from"../hooks/useFlexLayoutSplitScreen";import{getCurrentSplitScreenComponents as B,getSplitScreen as oe,removeRootSplitScreen as me,removeSplitScreenChild as De,resetRootSplitScreen as be,setSplitScreen as k}from"../store/FlexLayoutContainerStore";import Y from"../styles/FlexLayout.module.css";import le from"./FlexLayout";import V from"./FlexLayoutContainer";import Te from"./FlexLayoutSplitScreenDragBox";import ge from"fast-deep-equal/react";import{distinctUntilChanged as Ce,take as Se}from"rxjs";import xe from"./FlexLayoutSplitScreenDragBoxContainer";import Le from"./FlexLayoutSplitScreenDragBoxItem";import he from"./FlexLayoutSplitScreenDragBoxTitleMore";import de from"./FlexLayoutSplitScreenScrollBox";function $e({x:r,y:n,element:e}){const{x:T,y:u,right:y,bottom:l}=e.getBoundingClientRect();return r<T||r>y||n<u||n>l}function ie({x:r,y:n,element:e}){const{x:T,y:u,right:y,bottom:l}=e.getBoundingClientRect();return r>=T&&r<=y&&n>=u&&n<=l}const ae=()=>typeof window<"u"&&window.crypto?Array.from(window.crypto.getRandomValues(new Uint32Array(16)),r=>r.toString(32).padStart(2,"0")).join(""):Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),te=({orderName:r,parentOrderName:n,containerName:e,parentLayoutName:T,layoutName:u,dropComponent:y,navigationTitle:l,nextContainerName:M,isUsePrefix:g=!0,beforeDropTargetComponent:x,afterDropTargetComponent:K,centerDropTargetComponent:E,dropDocumentOutsideOption:D,screenKey:C=ae()})=>{const p=n||r;let I,d,F;p===r||p==="center"?I=r==="before"?{beforeDropTargetComponent:x}:r==="after"?{afterDropTargetComponent:K}:{centerDropTargetComponent:E.filter(a=>!a.containerName.split("_").at(0).startsWith(e.split("_").at(0)))}:I=p==="before"?{beforeDropTargetComponent:x}:{afterDropTargetComponent:K};const N=Object.entries(I)[0];F=N[0],d=N[1];const O={containerName:`${e+"_"+u}${g?"_"+r+"-"+d.length:""}`,component:ue(y,{key:C,screenKey:C}),navigationTitle:l,dropDocumentOutsideOption:D,screenKey:C||ae()};let R;if(M){const a=d.findIndex(X=>X.containerName===M);a!==-1?p===r?r==="before"?R=[...d.slice(0,a),O,...d.slice(a)]:R=[...d.slice(0,a+1),O,...d.slice(a+1)]:p==="after"&&r==="before"?R=[...d.slice(0,a),O,...d.slice(a)]:p==="before"&&r==="after"?R=[...d.slice(0,a+1),O,...d.slice(a+1)]:r==="before"?R=[...d.slice(0,a),O,...d.slice(a)]:R=[...d.slice(0,a+1),O,...d.slice(a+1)]:p==="center"&&r==="after"?R=[O,...d]:p==="center"&&r==="before"?R=[...d,O]:R=r==="before"?[O,...d]:[...d,O]}else R=r==="before"?[O,...d]:[...d,O];const A=new Set,Q=R.filter(a=>A.has(a.containerName)?!1:(A.add(a.containerName),!0));return w.next({state:"append",targetParentLayoutName:T,targetLayoutName:u,targetContainerName:e,orderName:r}),{[F]:Q}},H=(r,n,e)=>{const T=r.filter(u=>u.containerName!==n);return T.length!=r.length&&e(r.length-T.length),T};function Oe(r,n){return n+1<r.length?{adjacentItem:r[n+1],adjacentIndex:n+1}:n-1>=0?{adjacentItem:r[n-1],adjacentIndex:n-1}:{adjacentItem:null,adjacentIndex:n}}const ye=r=>{const n=r.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);if(["before","center","after"].some(e=>e===n))return n};function Re({children:r,containerName:n,layoutName:e,navigationTitle:T,dropDocumentOutsideOption:u,screenKey:y,isResetOnChildrenChange:l=!0,isRemoveStoreOnUnmount:M=!0}){const{direction:g,isSplit:x,boundaryContainerSize:K,afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,setAfterDropTargetComponent:p,setBeforeDropTargetComponent:I,setCenterDropTargetComponent:d,layoutRef:F,setIsSplit:N,setDirection:O}=ce({isSplitInitial:!1,directionInitial:"row",selfContainerName:n,parentLayoutName:"",layoutName:e}),R=ee(y??ae()),A=y??R.current;j(()=>{l&&be(e);const f=oe(e,e).subscribe(o=>{if(o){I([...o.beforeDropTargetComponent]),p([...o.afterDropTargetComponent]),d([...o.centerDropTargetComponent]),O(o.direction),(o.beforeDropTargetComponent.length!==0||o.afterDropTargetComponent.length!==0)&&N(!0);return}k(e,e,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[{containerName:n,component:r,navigationTitle:T,dropDocumentOutsideOption:u,screenKey:A}],direction:g})});return()=>{f.unsubscribe(),M&&me(e)}},[e,l]),j(()=>{if(l)return;const f=B(e,e);if(!f||f.centerDropTargetComponent.length===0)return;const o=f.centerDropTargetComponent[0],b=y??o.screenKey;if(o.screenKey!==b)return;const S={...o,component:r,navigationTitle:T,dropDocumentOutsideOption:u};if(o.component===S.component&&o.navigationTitle===S.navigationTitle&&o.dropDocumentOutsideOption===S.dropDocumentOutsideOption)return;k(e,e,{...f,centerDropTargetComponent:[S]});const v=o.screenKey,i=`${e}_center=${v}`,t=B(e,i);if(t?.centerDropTargetComponent?.length){const m=t.centerDropTargetComponent.findIndex(s=>s.screenKey===v);if(m!==-1){const s=[...t.centerDropTargetComponent];s[m]={...s[m],component:r,navigationTitle:T,dropDocumentOutsideOption:u},k(e,i,{...t,centerDropTargetComponent:s})}}},[l,e,r,T,u,y]),j(()=>{const f=w.pipe(Ce((o,b)=>{const S=v=>{const{children:i,component:t,targetComponent:m,x:s,y:L,...h}=v||{};return h};return ge(S(o),S(b))})).subscribe(o=>{if(o.state==="remove")(o.targetParentLayoutName===e||o.targetParentLayoutName===""&&o.targetLayoutName===e)&&requestAnimationFrame(()=>{let b=m=>{if(o.nextContainerName&&o.dropTargetComponentEvent&&o.targetComponent){const s=te({orderName:m,containerName:o.nextContainerName,parentLayoutName:"",layoutName:e,dropComponent:o.targetComponent,navigationTitle:o.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,dropDocumentOutsideOption:u,screenKey:o.dropTargetComponentEvent.screenKey});k(e,e,{...B(e,e)||{afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,direction:g},...s}),Promise.resolve().then(()=>o.dropEndCallback&&o.dropEndCallback({x:o.x,y:o.y,containerName:n}))}};const S=B(e,e),v=H(S?.afterDropTargetComponent||E,o.targetContainerName,()=>b("after")),i=H(S?.beforeDropTargetComponent||D,o.targetContainerName,()=>b("before")),t=H(S?.centerDropTargetComponent||C,o.targetContainerName,()=>b("center"));k(e,e,{afterDropTargetComponent:v,beforeDropTargetComponent:i,centerDropTargetComponent:t,direction:g})});else if(o.state==="append"){const{x:b,y:S,dropEndCallback:v,dropTargetComponentEvent:i,orderName:t,parentOrderName:m,targetLayoutName:s,targetParentLayoutName:L,targetContainerName:h,targetComponent:$,nextContainerName:_}=o;if(F.current&&t&&b&&S&&$&&i&&s===e&&ie({x:b,y:S,element:F.current})){const{direction:P,navigationTitle:U,dropDocumentOutsideOption:z}=i,Z=t!=="center",ne=t==="center"&&C.length<=1;if(Z||ne)if(N(!0),Z){O(P);const q=te({orderName:t,parentOrderName:m,containerName:h,nextContainerName:_,dropComponent:$,parentLayoutName:"",layoutName:e,navigationTitle:U,isUsePrefix:!0,afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,dropDocumentOutsideOption:z});k(e,e,{afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,direction:P,...q,direction:P}),Promise.resolve().then(()=>v&&v({x:o.x,y:o.y,containerName:n}))}else{const q=B(e,`${e}_center=${C[0].screenKey}`)||{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[],direction:g};k(e,`${e}_center=${C[0].screenKey}`,{...q,centerDropTargetComponent:[C[0],{containerName:`${h}_${e}_${t}`,component:$,dropDocumentOutsideOption:z,screenKey:i.screenKey,navigationTitle:U}]})}}}});return()=>{f.unsubscribe()}},[g,e,x,D,E,C]);const Q={containerName:n,component:r,navigationTitle:T,dropDocumentOutsideOption:u,screenKey:A},a=C[0]??Q,X=C.length>0;return J("div",{className:`${Y["flex-split-screen"]}`,ref:F,children:[J(le,{direction:g,layoutName:e,"data-is_split":x,panelMovementMode:"bulldozer",children:[D.length!=0?c(G,{children:D.map(({containerName:f,component:o,navigationTitle:b,dropDocumentOutsideOption:S,screenKey:v},i)=>c(V,{containerName:f,isInitialResizable:!0,isResizePanel:!0,children:c(W,{parentDirection:g,layoutName:`${e}_before`,parentLayoutName:e,containerName:f,depth:1,rootRef:F,screenKey:v,initialCenterComponents:[{navigationTitle:b,component:o,containerName:f,dropDocumentOutsideOption:S,screenKey:v}],rootName:e})},f))}):c("div",{}),c(V,{containerName:`${a.containerName}`,isInitialResizable:!0,isResizePanel:x,children:X&&x?c(W,{parentDirection:g,layoutName:`${e}_center`,parentLayoutName:e,containerName:a.containerName,depth:0,rootRef:F,screenKey:a.screenKey,initialCenterComponents:[{navigationTitle:a.navigationTitle,component:a.component,containerName:a.containerName,dropDocumentOutsideOption:a.dropDocumentOutsideOption,screenKey:a.screenKey}],rootName:e}):c(de,{keyName:a.containerName,isDefaultScrollStyle:!0,children:a.component})}),E.length!=0?c(G,{children:E.map(({containerName:f,component:o,navigationTitle:b,dropDocumentOutsideOption:S,screenKey:v},i)=>c(V,{containerName:f,isInitialResizable:!0,isResizePanel:E.length-1!==i,children:c(W,{parentDirection:g,layoutName:`${e}_after`,parentLayoutName:e,containerName:f,depth:1,rootRef:F,screenKey:v,initialCenterComponents:[{navigationTitle:b,component:o,containerName:f,dropDocumentOutsideOption:S,screenKey:v}],rootName:e})},f))}):c("div",{})]}),K&&c("div",{className:`${Y["flex-split-screen-boundary-container"]}`,style:{...K},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})}function W({containerName:r,layoutName:n,parentLayoutName:e,parentDirection:T,depth:u,rootRef:y,rootName:l,initialCenterComponents:M,screenKey:g}){const{direction:x,isSplit:K,boundaryContainerSize:E,afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,setAfterDropTargetComponent:I,setBeforeDropTargetComponent:d,setCenterDropTargetComponent:F,layoutRef:N,setIsSplit:O,setDirection:R}=ce({isSplitInitial:!1,directionInitial:"row",parentDirection:T,selfContainerName:r,parentLayoutName:e,layoutName:n}),[A,Q]=re(!1),[a,X]=re(0),f=ee(p),o=ee(M??[]),b=ee(a);j(()=>{const i=`${n}=${g}`,t=oe(l,i).pipe(Se(1)).subscribe(m=>{m||k(l,i,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:o.current,direction:x})});return()=>{De(l,`${n}=${g}`),t.unsubscribe()}},[l,n,g]),j(()=>{const i=oe(l,`${n}=${g}`).subscribe(t=>{t&&(d([...t.beforeDropTargetComponent]),I([...t.afterDropTargetComponent]),F([...t.centerDropTargetComponent]),R(t.direction),t.beforeDropTargetComponent.length!==0||t.afterDropTargetComponent.length!==0?O(!0):t.beforeDropTargetComponent.length===0&&t.centerDropTargetComponent.length===0&&t.afterDropTargetComponent.length===0&&(w.next({state:"remove",targetContainerName:r,targetParentLayoutName:"",targetLayoutName:e}),Q(!0)))});return()=>{i.unsubscribe(),me(n)}},[l,n]),j(()=>{const i=w.pipe(Ce((t,m)=>{const s=L=>{const{children:h,component:$,targetComponent:_,x:P,y:U,...z}=L||{};return z};return ge(s(t),s(m))})).subscribe(t=>{if(t.state==="remove")(t.targetParentLayoutName===n||t.targetParentLayoutName===""&&t.targetLayoutName===n)&&requestAnimationFrame(()=>{let m=_=>{if(t.nextContainerName&&t.dropTargetComponentEvent&&t.targetComponent){const P=te({orderName:_,containerName:t.nextContainerName,parentLayoutName:e,layoutName:n,dropComponent:t.targetComponent,navigationTitle:t.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,dropDocumentOutsideOption:t.dropTargetComponentEvent?.dropDocumentOutsideOption,screenKey:t.dropTargetComponentEvent.screenKey});k(l,`${n}=${g}`,{...B(l,`${n}=${g}`)||{afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,direction:x},...P}),Promise.resolve().then(()=>t.dropEndCallback&&t.dropEndCallback({x:t.x,y:t.y,containerName:r}))}};const s=B(l,`${n}=${g}`),L=H(s?.afterDropTargetComponent||D,t.targetContainerName,()=>m("after")),h=H(s?.beforeDropTargetComponent||C,t.targetContainerName,()=>m("before")),$=H(s?.centerDropTargetComponent||p,t.targetContainerName,()=>m("center"));k(l,`${n}=${g}`,{afterDropTargetComponent:L,beforeDropTargetComponent:h,centerDropTargetComponent:$,direction:x})});else if(t.state==="append"){const{x:m,y:s,dropEndCallback:L,dropTargetComponentEvent:h,orderName:$,targetLayoutName:_,targetParentLayoutName:P,targetContainerName:U,targetComponent:z,nextContainerName:Z,parentOrderName:ne}=t;if(N.current&&$&&m&&s&&h&&ie({x:m,y:s,element:N.current})){const{direction:q,navigationTitle:pe,dropDocumentOutsideOption:se,screenKey:ve}=h;if(_===n&&z)if(q===T&&$!=="center")w.next({state:"append",targetContainerName:U,targetParentLayoutName:"",targetLayoutName:e,targetComponent:z,nextContainerName:r,parentOrderName:ye(n)||$,orderName:$,x:m,y:s,dropEndCallback:L,dropTargetComponentEvent:{navigationTitle:pe,dropDocumentOutsideOption:se,direction:T,screenKey:g}});else{$!=="center"&&(R(q),O(!0));const fe=te({orderName:$,parentOrderName:ne,containerName:U,nextContainerName:Z,parentLayoutName:e,layoutName:n,dropComponent:z,navigationTitle:pe,isUsePrefix:$!=="center",afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,dropDocumentOutsideOption:se});k(l,`${n}=${g}`,{...B(l,`${n}=${g}`)||{afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,direction:x},...fe,direction:q}),Promise.resolve().then(()=>t.dropEndCallback&&t.dropEndCallback({x:t.x,y:t.y,containerName:r}))}}}});return()=>{i.unsubscribe()}},[x,T,e,n,C,D,p]),j(()=>{f.current=p},[p]),j(()=>{b.current=a},[a]);const[S,v]=re(!1);return c(G,{children:!A&&J("div",{className:`${Y["flex-split-screen"]}`,ref:N,children:[J(le,{direction:x,layoutName:`${n}`,panelMovementMode:"bulldozer",children:[C.length!=0?c(G,{children:C.map(({containerName:i,component:t,navigationTitle:m,dropDocumentOutsideOption:s,screenKey:L},h)=>c(V,{containerName:i,isInitialResizable:!0,isResizePanel:!0,children:c(W,{parentDirection:x,layoutName:`${n}_before-${u}`,parentLayoutName:n,containerName:i,depth:u+1,rootRef:y,screenKey:L,initialCenterComponents:[{navigationTitle:m,component:t,containerName:i,dropDocumentOutsideOption:s,screenKey:L}],rootName:l})},i))}):c("div",{}),p.length!=0?c(G,{children:c(V,{containerName:`${(p[a]||p[0]).containerName}`,isInitialResizable:!0,isResizePanel:K,children:K?c("div",{"data-key":g,children:c(W,{parentDirection:x,layoutName:`${n}_center-${u}`,parentLayoutName:n,containerName:`${(p[a]||p[0]).containerName}`,depth:u+1,rootRef:y,initialCenterComponents:p.map(({navigationTitle:i,component:t,containerName:m,dropDocumentOutsideOption:s,screenKey:L})=>({navigationTitle:i,component:t,containerName:m,dropDocumentOutsideOption:s,screenKey:L})),screenKey:g,rootName:l})}):J(de,{keyName:(p[a]||p[0]).containerName,isDefaultScrollStyle:!0,children:[!S&&c("div",{className:`${Y["flex-split-screen-drag-box-title-wrapper-sticky"]}`,children:J("div",{"data-is_split":K,"data-layout_name":n,"data-parent_layout_name":e,"data-container_name":`${(p[a]||p[0]).containerName}`,className:`${Y["flex-split-screen-drag-box-title-wrapper"]}`,children:[c(xe,{"data-layout_name":n,layoutName:n,children:p.map((i,t)=>c(Le,{onClose:m=>{b.current===t&&p.length===1?w.next({state:"remove",targetContainerName:r,targetParentLayoutName:e,targetLayoutName:n}):(p.length===b.current+1&&X(b.current-1),F(s=>{const L=H(s,i.containerName,()=>{}),h=`${n}=${g}`,$=B(l,h)||{afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:s,direction:x};return k(l,h,{...$,centerDropTargetComponent:L}),L}))},isActive:a===t,children:c(Te,{screenKey:i.screenKey,onClick:()=>{X(t)},containerName:i.containerName,dropDocumentOutsideOption:i.dropDocumentOutsideOption,targetComponent:i.component,navigationTitle:i.navigationTitle,"data-container-name":i.containerName,"data-layout-name":n,"data-parent-layout-name":e,dropEndCallback:({x:m,y:s,containerName:L})=>{if(!y.current||!N.current)return;const h=$e({x:m,y:s,element:y.current}),$=ie({x:m,y:s,element:N.current});if(!h&&!$||!h&&$&&f.current.length>1){const _={};if(f.current.length>1){const{adjacentItem:P,adjacentIndex:U}=Oe(f.current,b.current);P&&b.current===t&&Object.assign(_,{x:m,y:s,targetComponent:P.component,nextContainerName:P.containerName,orderName:"center",dropTargetComponentEvent:{navigationTitle:P.navigationTitle,dropDocumentOutsideOption:P.dropDocumentOutsideOption,direction:x,screenKey:g}})}t===0?w.next({state:"remove",targetContainerName:i.containerName,targetParentLayoutName:e,targetLayoutName:n,..._}):w.next({state:"remove",targetContainerName:i.containerName,targetParentLayoutName:"",targetLayoutName:n,..._})}},children:i.navigationTitle})},i.navigationTitle+n+i.containerName))},n),c(he,{})]})}),(p[a]||p[0]).component]})},(p[a]||p[0]).containerName)}):c("div",{}),D.length!=0?c(G,{children:D.map(({containerName:i,component:t,navigationTitle:m,dropDocumentOutsideOption:s,screenKey:L},h)=>c(V,{containerName:i,isInitialResizable:!0,isResizePanel:h!==D.length-1,children:c(W,{parentDirection:x,layoutName:`${n}_after-${u}`,parentLayoutName:n,containerName:i,depth:u+1,rootRef:y,screenKey:L,initialCenterComponents:[{navigationTitle:m,component:t,containerName:i,dropDocumentOutsideOption:s,screenKey:L}],rootName:l})},i))}):c("div",{})]}),E&&c("div",{className:`${Y["flex-split-screen-boundary-container"]}`,style:{...E},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})})}export{Re as default};

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

@@ -1 +1 @@
-"use strict";"use client";var L=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var o in t)L(e,o,{get:t[o],enumerable:!0})},X=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of j(t))!U.call(e,u)&&u!==o&&L(e,u,{get:()=>t[u],enumerable:!(s=$(t,u))||s.enumerable});return e};var Y=e=>X(L({},"__esModule",{value:!0}),e);var Q={};W(Q,{default:()=>K});module.exports=Y(Q);var T=require("react/jsx-runtime"),n=require("react");function C(e,t,o){return Math.max(t,Math.min(o,e))}function V(){if(typeof document>"u")return null;let e=document.body;for(;e&&e!==document.documentElement&&e!==document.body;){const t=getComputedStyle(e),o=t.overflowY,s=t.overflowX;if(o==="auto"||o==="scroll"||s==="auto"||s==="scroll")return e;e=e.parentElement}return null}function F(e){if(typeof window>"u")return!0;if(!e)return document.documentElement.scrollHeight>window.innerHeight+1;const t=e;return t.scrollHeight>t.clientHeight+1}const B=typeof window<"u"&&window.devicePixelRatio||1;function G(e){return Math.round(e*B)/B}const J=({edge:e="auto",offset:t=16,scrollRoot:o=null,debug:s=!1,children:u,style:D,className:P,transitionDurationMs:S=200,onTranslateChange:O=()=>{},...k})=>{const v=(0,n.useRef)(t),R=(0,n.useRef)(null),w=(0,n.useRef)(null),g=(0,n.useRef)(!1),H=(0,n.useRef)(0),[f,x]=(0,n.useState)("top"),b=(0,n.useRef)(null),[z,A]=(0,n.useState)({});(0,n.useEffect)(()=>{A({willChange:"transform",transition:`transform ${S}ms linear`})},[S]),(0,n.useEffect)(()=>{v.current=t,d()},[t]);const[c,q]=(0,n.useState)(null);(0,n.useEffect)(()=>{const r=o??V();x(e==="auto"?F(r)?"top":"left":e),q(r)},[e,o]),(0,n.useEffect)(()=>{if(e!=="auto"){x(e);return}const r=F(c);x(r?"top":"left")},[e,c]),(0,n.useEffect)(()=>{},[]);const d=()=>{b.current==null&&(b.current=requestAnimationFrame(()=>{b.current=null,I()}))},I=()=>{if(g.current)return;g.current=!0;const r=R.current,i=w.current;if(!r||!i){g.current=!1;return}const y=r.parentElement;if(!y){g.current=!1;return}const m=c&&"getBoundingClientRect"in c?c.getBoundingClientRect():new DOMRect(0,0,window.innerWidth,window.innerHeight),l=y.getBoundingClientRect(),a=i.getBoundingClientRect();let E=0;if(f==="top"||f==="bottom"){const M=Math.max(0,l.height-a.height);let h=0;f==="top"?h=m.top+v.current-l.top:h=Math.min(l.bottom,m.bottom-v.current)-l.top-a.height,E=C(h,0,M)}else{const M=Math.max(0,l.width-a.width);let h=0;f==="left"?h=m.left+v.current-l.left:h=Math.min(l.right,m.right-v.current)-l.left-a.width,E=C(h,0,M)}const p=G(E);Math.abs(H.current-p)>.5&&(f==="top"||f==="bottom"?i.style.transform=`translateY(${p}px)`:i.style.transform=`translateX(${p}px)`,H.current=p,O(p,R,w)),s&&(r.style.outline="1px dashed rgba(0,0,0,.2)",i.style.outline="1px solid rgba(0,128,255,.35)"),queueMicrotask(()=>{g.current=!1})};return(0,n.useEffect)(()=>{if(typeof window>"u")return;const r=R.current;if(!r)return;const i=r.parentElement;if(console.log(i),!i)return;const y=[i],m=()=>{g.current||d()},l=new IntersectionObserver(m,{root:c instanceof Element?c:null,threshold:0,rootMargin:"1px"}),a=new ResizeObserver(m);y.forEach(p=>l.observe(p)),a.observe(i),w.current&&a.observe(w.current);const E=c||window;return E.addEventListener("scroll",d,{passive:!0}),window.addEventListener("resize",d),d(),()=>{l.disconnect(),a.disconnect(),E.removeEventListener("scroll",d),window.removeEventListener("resize",d),b.current!=null&&(cancelAnimationFrame(b.current),b.current=null)}},[c,f,t,s]),(0,T.jsx)("div",{ref:R,className:P,style:{display:"block",minWidth:0,minHeight:0,height:"100%",...D},...k,children:(0,T.jsx)("div",{ref:w,style:z,children:u})})};var K=J;
+"use strict";"use client";var L=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var o in t)L(e,o,{get:t[o],enumerable:!0})},X=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of j(t))!U.call(e,u)&&u!==o&&L(e,u,{get:()=>t[u],enumerable:!(s=$(t,u))||s.enumerable});return e};var Y=e=>X(L({},"__esModule",{value:!0}),e);var Q={};W(Q,{default:()=>K});module.exports=Y(Q);var T=require("react/jsx-runtime"),n=require("react");function C(e,t,o){return Math.max(t,Math.min(o,e))}function V(){if(typeof document>"u")return null;let e=document.body;for(;e&&e!==document.documentElement&&e!==document.body;){const t=getComputedStyle(e),o=t.overflowY,s=t.overflowX;if(o==="auto"||o==="scroll"||s==="auto"||s==="scroll")return e;e=e.parentElement}return null}function F(e){if(typeof window>"u")return!0;if(!e)return document.documentElement.scrollHeight>window.innerHeight+1;const t=e;return t.scrollHeight>t.clientHeight+1}const B=typeof window<"u"&&window.devicePixelRatio||1;function G(e){return Math.round(e*B)/B}const J=({edge:e="auto",offset:t=16,scrollRoot:o=null,debug:s=!1,children:u,style:D,className:P,transitionDurationMs:S=200,onTranslateChange:O=()=>{},...k})=>{const v=(0,n.useRef)(t),R=(0,n.useRef)(null),w=(0,n.useRef)(null),g=(0,n.useRef)(!1),H=(0,n.useRef)(0),[f,x]=(0,n.useState)("top"),b=(0,n.useRef)(null),[z,A]=(0,n.useState)({});(0,n.useEffect)(()=>{A({willChange:"transform",transition:`transform ${S}ms linear`})},[S]),(0,n.useEffect)(()=>{v.current=t,d()},[t]);const[i,q]=(0,n.useState)(null);(0,n.useEffect)(()=>{const r=o??V();x(e==="auto"?F(r)?"top":"left":e),q(r)},[e,o]),(0,n.useEffect)(()=>{if(e!=="auto"){x(e);return}const r=F(i);x(r?"top":"left")},[e,i]),(0,n.useEffect)(()=>{},[]);const d=()=>{b.current==null&&(b.current=requestAnimationFrame(()=>{b.current=null,I()}))},I=()=>{if(g.current)return;g.current=!0;const r=R.current,c=w.current;if(!r||!c){g.current=!1;return}const y=r.parentElement;if(!y){g.current=!1;return}const m=i&&"getBoundingClientRect"in i?i.getBoundingClientRect():new DOMRect(0,0,window.innerWidth,window.innerHeight),l=y.getBoundingClientRect(),a=c.getBoundingClientRect();let E=0;if(f==="top"||f==="bottom"){const M=Math.max(0,l.height-a.height);let h=0;f==="top"?h=m.top+v.current-l.top:h=Math.min(l.bottom,m.bottom-v.current)-l.top-a.height,E=C(h,0,M)}else{const M=Math.max(0,l.width-a.width);let h=0;f==="left"?h=m.left+v.current-l.left:h=Math.min(l.right,m.right-v.current)-l.left-a.width,E=C(h,0,M)}const p=G(E);Math.abs(H.current-p)>.5&&(f==="top"||f==="bottom"?c.style.transform=`translateY(${p}px)`:c.style.transform=`translateX(${p}px)`,H.current=p,O(p,R,w)),s&&(r.style.outline="1px dashed rgba(0,0,0,.2)",c.style.outline="1px solid rgba(0,128,255,.35)"),queueMicrotask(()=>{g.current=!1})};return(0,n.useEffect)(()=>{if(typeof window>"u")return;const r=R.current;if(!r)return;const c=r.parentElement;if(!c)return;const y=[c],m=()=>{g.current||d()},l=new IntersectionObserver(m,{root:i instanceof Element?i:null,threshold:0,rootMargin:"1px"}),a=new ResizeObserver(m);y.forEach(p=>l.observe(p)),a.observe(c),w.current&&a.observe(w.current);const E=i||window;return E.addEventListener("scroll",d,{passive:!0}),window.addEventListener("resize",d),d(),()=>{l.disconnect(),a.disconnect(),E.removeEventListener("scroll",d),window.removeEventListener("resize",d),b.current!=null&&(cancelAnimationFrame(b.current),b.current=null)}},[i,f,t,s]),(0,T.jsx)("div",{ref:R,className:P,style:{display:"block",minWidth:0,minHeight:0,height:"100%",...D},...k,children:(0,T.jsx)("div",{ref:w,style:z,children:u})})};var K=J;

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

@@ -1 +1 @@
-"use client";import{jsx as D}from"react/jsx-runtime";import{useEffect as g,useRef as b,useState as L}from"react";function C(e,t,c){return Math.max(t,Math.min(c,e))}function j(){if(typeof document>"u")return null;let e=document.body;for(;e&&e!==document.documentElement&&e!==document.body;){const t=getComputedStyle(e),c=t.overflowY,E=t.overflowX;if(c==="auto"||c==="scroll"||E==="auto"||E==="scroll")return e;e=e.parentElement}return null}function F(e){if(typeof window>"u")return!0;if(!e)return document.documentElement.scrollHeight>window.innerHeight+1;const t=e;return t.scrollHeight>t.clientHeight+1}const B=typeof window<"u"&&window.devicePixelRatio||1;function U(e){return Math.round(e*B)/B}const W=({edge:e="auto",offset:t=16,scrollRoot:c=null,debug:E=!1,children:T,style:P,className:O,transitionDurationMs:S=200,onTranslateChange:k=()=>{},...z})=>{const v=b(t),R=b(null),w=b(null),m=b(!1),H=b(0),[s,x]=L("top"),p=b(null),[A,q]=L({});g(()=>{q({willChange:"transform",transition:`transform ${S}ms linear`})},[S]),g(()=>{v.current=t,u()},[t]);const[l,I]=L(null);g(()=>{const n=c??j();x(e==="auto"?F(n)?"top":"left":e),I(n)},[e,c]),g(()=>{if(e!=="auto"){x(e);return}const n=F(l);x(n?"top":"left")},[e,l]),g(()=>{},[]);const u=()=>{p.current==null&&(p.current=requestAnimationFrame(()=>{p.current=null,N()}))},N=()=>{if(m.current)return;m.current=!0;const n=R.current,r=w.current;if(!n||!r){m.current=!1;return}const y=n.parentElement;if(!y){m.current=!1;return}const a=l&&"getBoundingClientRect"in l?l.getBoundingClientRect():new DOMRect(0,0,window.innerWidth,window.innerHeight),o=y.getBoundingClientRect(),i=r.getBoundingClientRect();let h=0;if(s==="top"||s==="bottom"){const M=Math.max(0,o.height-i.height);let d=0;s==="top"?d=a.top+v.current-o.top:d=Math.min(o.bottom,a.bottom-v.current)-o.top-i.height,h=C(d,0,M)}else{const M=Math.max(0,o.width-i.width);let d=0;s==="left"?d=a.left+v.current-o.left:d=Math.min(o.right,a.right-v.current)-o.left-i.width,h=C(d,0,M)}const f=U(h);Math.abs(H.current-f)>.5&&(s==="top"||s==="bottom"?r.style.transform=`translateY(${f}px)`:r.style.transform=`translateX(${f}px)`,H.current=f,k(f,R,w)),E&&(n.style.outline="1px dashed rgba(0,0,0,.2)",r.style.outline="1px solid rgba(0,128,255,.35)"),queueMicrotask(()=>{m.current=!1})};return g(()=>{if(typeof window>"u")return;const n=R.current;if(!n)return;const r=n.parentElement;if(console.log(r),!r)return;const y=[r],a=()=>{m.current||u()},o=new IntersectionObserver(a,{root:l instanceof Element?l:null,threshold:0,rootMargin:"1px"}),i=new ResizeObserver(a);y.forEach(f=>o.observe(f)),i.observe(r),w.current&&i.observe(w.current);const h=l||window;return h.addEventListener("scroll",u,{passive:!0}),window.addEventListener("resize",u),u(),()=>{o.disconnect(),i.disconnect(),h.removeEventListener("scroll",u),window.removeEventListener("resize",u),p.current!=null&&(cancelAnimationFrame(p.current),p.current=null)}},[l,s,t,E]),D("div",{ref:R,className:O,style:{display:"block",minWidth:0,minHeight:0,height:"100%",...P},...z,children:D("div",{ref:w,style:A,children:T})})};var Q=W;export{Q as default};
+"use client";import{jsx as D}from"react/jsx-runtime";import{useEffect as g,useRef as b,useState as L}from"react";function C(e,t,c){return Math.max(t,Math.min(c,e))}function j(){if(typeof document>"u")return null;let e=document.body;for(;e&&e!==document.documentElement&&e!==document.body;){const t=getComputedStyle(e),c=t.overflowY,E=t.overflowX;if(c==="auto"||c==="scroll"||E==="auto"||E==="scroll")return e;e=e.parentElement}return null}function F(e){if(typeof window>"u")return!0;if(!e)return document.documentElement.scrollHeight>window.innerHeight+1;const t=e;return t.scrollHeight>t.clientHeight+1}const B=typeof window<"u"&&window.devicePixelRatio||1;function U(e){return Math.round(e*B)/B}const W=({edge:e="auto",offset:t=16,scrollRoot:c=null,debug:E=!1,children:T,style:P,className:O,transitionDurationMs:S=200,onTranslateChange:k=()=>{},...z})=>{const v=b(t),R=b(null),w=b(null),m=b(!1),H=b(0),[s,x]=L("top"),p=b(null),[A,q]=L({});g(()=>{q({willChange:"transform",transition:`transform ${S}ms linear`})},[S]),g(()=>{v.current=t,u()},[t]);const[r,I]=L(null);g(()=>{const n=c??j();x(e==="auto"?F(n)?"top":"left":e),I(n)},[e,c]),g(()=>{if(e!=="auto"){x(e);return}const n=F(r);x(n?"top":"left")},[e,r]),g(()=>{},[]);const u=()=>{p.current==null&&(p.current=requestAnimationFrame(()=>{p.current=null,N()}))},N=()=>{if(m.current)return;m.current=!0;const n=R.current,l=w.current;if(!n||!l){m.current=!1;return}const y=n.parentElement;if(!y){m.current=!1;return}const a=r&&"getBoundingClientRect"in r?r.getBoundingClientRect():new DOMRect(0,0,window.innerWidth,window.innerHeight),o=y.getBoundingClientRect(),i=l.getBoundingClientRect();let h=0;if(s==="top"||s==="bottom"){const M=Math.max(0,o.height-i.height);let d=0;s==="top"?d=a.top+v.current-o.top:d=Math.min(o.bottom,a.bottom-v.current)-o.top-i.height,h=C(d,0,M)}else{const M=Math.max(0,o.width-i.width);let d=0;s==="left"?d=a.left+v.current-o.left:d=Math.min(o.right,a.right-v.current)-o.left-i.width,h=C(d,0,M)}const f=U(h);Math.abs(H.current-f)>.5&&(s==="top"||s==="bottom"?l.style.transform=`translateY(${f}px)`:l.style.transform=`translateX(${f}px)`,H.current=f,k(f,R,w)),E&&(n.style.outline="1px dashed rgba(0,0,0,.2)",l.style.outline="1px solid rgba(0,128,255,.35)"),queueMicrotask(()=>{m.current=!1})};return g(()=>{if(typeof window>"u")return;const n=R.current;if(!n)return;const l=n.parentElement;if(!l)return;const y=[l],a=()=>{m.current||u()},o=new IntersectionObserver(a,{root:r instanceof Element?r:null,threshold:0,rootMargin:"1px"}),i=new ResizeObserver(a);y.forEach(f=>o.observe(f)),i.observe(l),w.current&&i.observe(w.current);const h=r||window;return h.addEventListener("scroll",u,{passive:!0}),window.addEventListener("resize",u),u(),()=>{o.disconnect(),i.disconnect(),h.removeEventListener("scroll",u),window.removeEventListener("resize",u),p.current!=null&&(cancelAnimationFrame(p.current),p.current=null)}},[r,s,t,E]),D("div",{ref:R,className:O,style:{display:"block",minWidth:0,minHeight:0,height:"100%",...P},...z,children:D("div",{ref:w,style:A,children:T})})};var Q=W;export{Q as default};

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

@@ -1 +1 @@
-"use strict";var F=Object.create;var r=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var n=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var B=(e,o)=>{for(var t in o)r(e,t,{get:o[t],enumerable:!0})},f=(e,o,t,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of i(o))!c.call(e,l)&&l!==t&&r(e,l,{get:()=>o[l],enumerable:!(x=L(o,l))||x.enumerable});return e};var a=(e,o,t)=>(t=e!=null?F(n(e)):{},f(o||!e||!e.__esModule?r(t,"default",{value:e,enumerable:!0}):t,e)),g=e=>f(r({},"__esModule",{value:!0}),e);var k={};B(k,{FlexLayout:()=>u.default,FlexLayoutContainer:()=>p.default,FlexLayoutResizePanel:()=>s.default,FlexLayoutSplitScreen:()=>y.default,FlexLayoutSplitScreenDragBox:()=>S.default,FlexLayoutSplitScreenScrollBox:()=>d.default,FlexLayoutStickyBox:()=>m.default});module.exports=g(k);var u=a(require("./FlexLayout"),1),p=a(require("./FlexLayoutContainer"),1),s=a(require("./FlexLayoutResizePanel"),1),y=a(require("./FlexLayoutSplitScreen"),1),S=a(require("./FlexLayoutSplitScreenDragBox"),1),d=a(require("./FlexLayoutSplitScreenScrollBox"),1),m=a(require("./FlexLayoutStickyBox"),1);0&&(module.exports={FlexLayout,FlexLayoutContainer,FlexLayoutResizePanel,FlexLayoutSplitScreen,FlexLayoutSplitScreenDragBox,FlexLayoutSplitScreenScrollBox,FlexLayoutStickyBox});
+"use strict";var L=Object.create;var r=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},f=(e,t,o,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of n(t))!B.call(e,l)&&l!==o&&r(e,l,{get:()=>t[l],enumerable:!(x=S(t,l))||x.enumerable});return e};var a=(e,t,o)=>(o=e!=null?L(c(e)):{},f(t||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>f(r({},"__esModule",{value:!0}),e);var h={};g(h,{FlexLayout:()=>u.default,FlexLayoutContainer:()=>p.default,FlexLayoutDynamicHeight:()=>y.default,FlexLayoutResizePanel:()=>m.default,FlexLayoutSplitScreen:()=>s.default,FlexLayoutSplitScreenDragBox:()=>d.default,FlexLayoutSplitScreenScrollBox:()=>i.default,FlexLayoutStickyBox:()=>F.default});module.exports=D(h);var u=a(require("./FlexLayout"),1),p=a(require("./FlexLayoutContainer"),1),y=a(require("./FlexLayoutDynamicHeight"),1),m=a(require("./FlexLayoutResizePanel"),1),s=a(require("./FlexLayoutSplitScreen"),1),d=a(require("./FlexLayoutSplitScreenDragBox"),1),i=a(require("./FlexLayoutSplitScreenScrollBox"),1),F=a(require("./FlexLayoutStickyBox"),1);0&&(module.exports={FlexLayout,FlexLayoutContainer,FlexLayoutDynamicHeight,FlexLayoutResizePanel,FlexLayoutSplitScreen,FlexLayoutSplitScreenDragBox,FlexLayoutSplitScreenScrollBox,FlexLayoutStickyBox});

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

@@ -1,5 +1,6 @@
 export { default as FlexLayout } from "./FlexLayout";
 export { default as FlexLayoutContainer } from "./FlexLayoutContainer";
+export { default as FlexLayoutDynamicHeight } from "./FlexLayoutDynamicHeight";
 export { default as FlexLayoutResizePanel } from "./FlexLayoutResizePanel";
 export { default as FlexLayoutSplitScreen } from "./FlexLayoutSplitScreen";
 export { default as FlexLayoutSplitScreenDragBox } from "./FlexLayoutSplitScreenDragBox";

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

@@ -1 +1 @@
-import{default as t}from"./FlexLayout";import{default as l}from"./FlexLayoutContainer";import{default as x}from"./FlexLayoutResizePanel";import{default as u}from"./FlexLayoutSplitScreen";import{default as s}from"./FlexLayoutSplitScreenDragBox";import{default as S}from"./FlexLayoutSplitScreenScrollBox";import{default as m}from"./FlexLayoutStickyBox";export{t as FlexLayout,l as FlexLayoutContainer,x as FlexLayoutResizePanel,u as FlexLayoutSplitScreen,s as FlexLayoutSplitScreenDragBox,S as FlexLayoutSplitScreenScrollBox,m as FlexLayoutStickyBox};
+import{default as o}from"./FlexLayout";import{default as l}from"./FlexLayoutContainer";import{default as x}from"./FlexLayoutDynamicHeight";import{default as u}from"./FlexLayoutResizePanel";import{default as y}from"./FlexLayoutSplitScreen";import{default as s}from"./FlexLayoutSplitScreenDragBox";import{default as i}from"./FlexLayoutSplitScreenScrollBox";import{default as L}from"./FlexLayoutStickyBox";export{o as FlexLayout,l as FlexLayoutContainer,x as FlexLayoutDynamicHeight,u as FlexLayoutResizePanel,y as FlexLayoutSplitScreen,s as FlexLayoutSplitScreenDragBox,i as FlexLayoutSplitScreenScrollBox,L as FlexLayoutStickyBox};

package/dist/flex-layout/hooks/useDrag.cjs

@@ -1 +1 @@
-"use strict";var j=Object.create;var S=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var L=(e,n)=>{for(var t in n)S(e,t,{get:n[t],enumerable:!0})},O=(e,n,t,m)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of F(n))!P.call(e,o)&&o!==t&&S(e,o,{get:()=>n[o],enumerable:!(m=X(n,o))||m.enumerable});return e};var z=(e,n,t)=>(t=e!=null?j(Y(e)):{},O(n||!e||!e.__esModule?S(t,"default",{value:e,enumerable:!0}):t,e)),k=e=>O(S({},"__esModule",{value:!0}),e);var Q={};L(Q,{allSplitScreenCount:()=>U,dragState:()=>H,dragStateSubject:()=>C,dropMovementEventSubject:()=>q,folderEventSubject:()=>N,isResizingSubject:()=>I,resizeDragSubject:()=>K,setFolderEvent:()=>G,useDragCapture:()=>W,useDragEvents:()=>V,useFolderEvent:()=>J});module.exports=k(Q);var B=z(require("fast-deep-equal"),1),r=require("react"),c=require("rxjs"),x=require("../utils/FlexLayoutUtils");const C=new c.Subject,H=C,I=new c.BehaviorSubject(!1),K=new c.Subject,R=e=>{const{children:n,...t}=e||{};return t},W=e=>{const[n,t]=(0,r.useState)(null);return(0,r.useEffect)(()=>{const m=C.pipe((0,c.auditTime)(0,c.animationFrameScheduler),(0,c.map)(o=>{if(!e||!e.current)return null;const{x:u,y:p}=o,d=e.current.getBoundingClientRect(),{width:v,height:b,x:E,y:T,right:h,bottom:i}=d;let f=!1;(u<E||u>h||p<T||p>i)&&(f=!0);const a=E+v*.2,s=h-v*.2,y=T+b*.2,g=i-b*.2;let l="centerBoundary";return u<a?l="leftBoundary":u>s?l="rightBoundary":p<y?l="topBoundary":p>g&&(l="bottomBoundary"),{positionName:l,isOver:f,...o}}),(0,c.distinctUntilChanged)((o,u)=>{const{children:p,...d}=o||{},{children:v,...b}=u||{};return(0,B.default)(R(d),R(b))})).subscribe({next:t,error:o=>console.error(o)});return()=>m.unsubscribe()},[e]),n},q=new c.Subject,U=new c.BehaviorSubject(0),V=({isBlockingActiveInput:e=!1})=>{const n=(0,r.useRef)(null),t=(0,r.useRef)(null),m=10,o=(0,r.useRef)(!1),u=(0,r.useRef)(!1),p=(0,r.useRef)(!1),d=(0,r.useRef)(!1),v=(0,r.useRef)(0),b=(0,r.useRef)(0);(0,r.useEffect)(()=>()=>{n.current&&(clearTimeout(n.current),n.current=null),t.current&&(clearTimeout(t.current),t.current=null)},[]);const E=(0,r.useCallback)(({event:i,dragStartCallback:f})=>{const a=i instanceof Event?i:i.nativeEvent;if(n.current&&(clearTimeout(n.current),n.current=null),t.current&&(clearTimeout(t.current),t.current=null),a.target.contentEditable==="true"||e&&document.activeElement===a.target)return;a.cancelable&&!(a instanceof globalThis.TouchEvent)&&a.preventDefault(),u.current=!0,p.current=!0,o.current=!1;const s=(0,x.getClientXy)(a);if(s){if(v.current=s.clientX,b.current=s.clientY,a.type.toLowerCase().startsWith("touch")||a instanceof globalThis.TouchEvent){u.current=!1,d.current=!0,f({x:s.clientX,y:s.clientY});return}t.current=setTimeout(()=>{if(!u.current||o.current)return;u.current=!1,d.current=!0;const y=(0,x.getClientXy)(a);if(!y)return;const{clientX:g,clientY:l}=y;f({x:g,y:l})},300)}},[e]),T=(0,r.useCallback)(({event:i,notDragCallback:f,dragStartCallback:a,moveingCallback:s})=>{if(!p.current)return;const y=i instanceof Event?i:i.nativeEvent,g=(0,x.getClientXy)(y);if(!g)return;const{clientX:l,clientY:D}=g,M=Math.abs(l-v.current),w=Math.abs(D-b.current);if(u.current&&(y.type.toLowerCase().startsWith("touch")||y instanceof globalThis.TouchEvent)&&(M>m||w>m)){t.current&&(clearTimeout(t.current),t.current=null),o.current=!0,u.current=!1,d.current=!1,f&&f({x:l,y:D}),n.current&&(clearTimeout(n.current),n.current=null),n.current=setTimeout(()=>{p.current&&(v.current=l,b.current=D,u.current=!0,o.current=!1,E({event:i,dragStartCallback:a}))},400);return}!d.current||u.current||s({x:l,y:D})},[e]),h=(0,r.useCallback)(({event:i,dragEndCallback:f})=>{if(o.current=!1,p.current=!1,u.current){u.current=!1,t.current&&(clearTimeout(t.current),t.current=null);return}const a=i instanceof Event?i:i.nativeEvent;if(!d.current)return;d.current=!1;const s=(0,x.getClientXy)(a);if(!s)return;const{clientX:y,clientY:g}=s;f({x:y,y:g})},[e]);return{handleStart:E,handleMove:T,handleEnd:h}},N=new c.Subject,G=e=>{N.next(e)},J=()=>{const[e,n]=(0,r.useState)(null);return(0,r.useEffect)(()=>{const t=N.subscribe(m=>{m&&n(m)});return()=>{t&&t.unsubscribe()}},[]),{folderEvent:e}};0&&(module.exports={allSplitScreenCount,dragState,dragStateSubject,dropMovementEventSubject,folderEventSubject,isResizingSubject,resizeDragSubject,setFolderEvent,useDragCapture,useDragEvents,useFolderEvent});
+"use strict";var j=Object.create;var S=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var L=(e,n)=>{for(var t in n)S(e,t,{get:n[t],enumerable:!0})},O=(e,n,t,m)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of F(n))!P.call(e,o)&&o!==t&&S(e,o,{get:()=>n[o],enumerable:!(m=X(n,o))||m.enumerable});return e};var z=(e,n,t)=>(t=e!=null?j(Y(e)):{},O(n||!e||!e.__esModule?S(t,"default",{value:e,enumerable:!0}):t,e)),k=e=>O(S({},"__esModule",{value:!0}),e);var Q={};L(Q,{allSplitScreenCount:()=>U,dragState:()=>H,dragStateSubject:()=>C,dropMovementEventSubject:()=>q,folderEventSubject:()=>N,isResizingSubject:()=>I,resizeDragSubject:()=>K,setFolderEvent:()=>G,useDragCapture:()=>W,useDragEvents:()=>V,useFolderEvent:()=>J});module.exports=k(Q);var B=z(require("fast-deep-equal/react"),1),r=require("react"),c=require("rxjs"),x=require("../utils/FlexLayoutUtils");const C=new c.Subject,H=C,I=new c.BehaviorSubject(!1),K=new c.Subject,R=e=>{const{children:n,...t}=e||{};return t},W=e=>{const[n,t]=(0,r.useState)(null);return(0,r.useEffect)(()=>{const m=C.pipe((0,c.auditTime)(0,c.animationFrameScheduler),(0,c.map)(o=>{if(!e||!e.current)return null;const{x:u,y:p}=o,d=e.current.getBoundingClientRect(),{width:v,height:b,x:E,y:T,right:h,bottom:i}=d;let f=!1;(u<E||u>h||p<T||p>i)&&(f=!0);const a=E+v*.2,s=h-v*.2,y=T+b*.2,g=i-b*.2;let l="centerBoundary";return u<a?l="leftBoundary":u>s?l="rightBoundary":p<y?l="topBoundary":p>g&&(l="bottomBoundary"),{positionName:l,isOver:f,...o}}),(0,c.distinctUntilChanged)((o,u)=>{const{children:p,...d}=o||{},{children:v,...b}=u||{};return(0,B.default)(R(d),R(b))})).subscribe({next:t,error:o=>console.error(o)});return()=>m.unsubscribe()},[e]),n},q=new c.Subject,U=new c.BehaviorSubject(0),V=({isBlockingActiveInput:e=!1})=>{const n=(0,r.useRef)(null),t=(0,r.useRef)(null),m=10,o=(0,r.useRef)(!1),u=(0,r.useRef)(!1),p=(0,r.useRef)(!1),d=(0,r.useRef)(!1),v=(0,r.useRef)(0),b=(0,r.useRef)(0);(0,r.useEffect)(()=>()=>{n.current&&(clearTimeout(n.current),n.current=null),t.current&&(clearTimeout(t.current),t.current=null)},[]);const E=(0,r.useCallback)(({event:i,dragStartCallback:f})=>{const a=i instanceof Event?i:i.nativeEvent;if(n.current&&(clearTimeout(n.current),n.current=null),t.current&&(clearTimeout(t.current),t.current=null),a.target.contentEditable==="true"||e&&document.activeElement===a.target)return;a.cancelable&&!(a instanceof globalThis.TouchEvent)&&a.preventDefault(),u.current=!0,p.current=!0,o.current=!1;const s=(0,x.getClientXy)(a);if(s){if(v.current=s.clientX,b.current=s.clientY,a.type.toLowerCase().startsWith("touch")||a instanceof globalThis.TouchEvent){u.current=!1,d.current=!0,f({x:s.clientX,y:s.clientY});return}t.current=setTimeout(()=>{if(!u.current||o.current)return;u.current=!1,d.current=!0;const y=(0,x.getClientXy)(a);if(!y)return;const{clientX:g,clientY:l}=y;f({x:g,y:l})},300)}},[e]),T=(0,r.useCallback)(({event:i,notDragCallback:f,dragStartCallback:a,moveingCallback:s})=>{if(!p.current)return;const y=i instanceof Event?i:i.nativeEvent,g=(0,x.getClientXy)(y);if(!g)return;const{clientX:l,clientY:D}=g,M=Math.abs(l-v.current),w=Math.abs(D-b.current);if(u.current&&(y.type.toLowerCase().startsWith("touch")||y instanceof globalThis.TouchEvent)&&(M>m||w>m)){t.current&&(clearTimeout(t.current),t.current=null),o.current=!0,u.current=!1,d.current=!1,f&&f({x:l,y:D}),n.current&&(clearTimeout(n.current),n.current=null),n.current=setTimeout(()=>{p.current&&(v.current=l,b.current=D,u.current=!0,o.current=!1,E({event:i,dragStartCallback:a}))},400);return}!d.current||u.current||s({x:l,y:D})},[e]),h=(0,r.useCallback)(({event:i,dragEndCallback:f})=>{if(o.current=!1,p.current=!1,u.current){u.current=!1,t.current&&(clearTimeout(t.current),t.current=null);return}const a=i instanceof Event?i:i.nativeEvent;if(!d.current)return;d.current=!1;const s=(0,x.getClientXy)(a);if(!s)return;const{clientX:y,clientY:g}=s;f({x:y,y:g})},[e]);return{handleStart:E,handleMove:T,handleEnd:h}},N=new c.Subject,G=e=>{N.next(e)},J=()=>{const[e,n]=(0,r.useState)(null);return(0,r.useEffect)(()=>{const t=N.subscribe(m=>{m&&n(m)});return()=>{t&&t.unsubscribe()}},[]),{folderEvent:e}};0&&(module.exports={allSplitScreenCount,dragState,dragStateSubject,dropMovementEventSubject,folderEventSubject,isResizingSubject,resizeDragSubject,setFolderEvent,useDragCapture,useDragEvents,useFolderEvent});

package/dist/flex-layout/hooks/useDrag.js

@@ -1 +1 @@
-import X from"fast-deep-equal";import{useCallback as S,useEffect as C,useRef as y,useState as N}from"react";import{animationFrameScheduler as F,auditTime as Y,BehaviorSubject as O,distinctUntilChanged as P,map as L,Subject as h}from"rxjs";import{getClientXy as D}from"../utils/FlexLayoutUtils";const R=new h,J=R,Q=new O(!1),Z=new h,B=n=>{const{children:r,...e}=n||{};return e},$=n=>{const[r,e]=N(null);return C(()=>{const b=R.pipe(Y(0,F),L(c=>{if(!n||!n.current)return null;const{x:t,y:s}=c,l=n.current.getBoundingClientRect(),{width:g,height:d,x:v,y:E,right:x,bottom:o}=l;let m=!1;(t<v||t>x||s<E||s>o)&&(m=!0);const u=v+g*.2,i=x-g*.2,p=E+d*.2,f=o-d*.2;let a="centerBoundary";return t<u?a="leftBoundary":t>i?a="rightBoundary":s<p?a="topBoundary":s>f&&(a="bottomBoundary"),{positionName:a,isOver:m,...c}}),P((c,t)=>{const{children:s,...l}=c||{},{children:g,...d}=t||{};return X(B(l),B(d))})).subscribe({next:e,error:c=>console.error(c)});return()=>b.unsubscribe()},[n]),r},A=new h,_=new O(0),ee=({isBlockingActiveInput:n=!1})=>{const r=y(null),e=y(null),b=10,c=y(!1),t=y(!1),s=y(!1),l=y(!1),g=y(0),d=y(0);C(()=>()=>{r.current&&(clearTimeout(r.current),r.current=null),e.current&&(clearTimeout(e.current),e.current=null)},[]);const v=S(({event:o,dragStartCallback:m})=>{const u=o instanceof Event?o:o.nativeEvent;if(r.current&&(clearTimeout(r.current),r.current=null),e.current&&(clearTimeout(e.current),e.current=null),u.target.contentEditable==="true"||n&&document.activeElement===u.target)return;u.cancelable&&!(u instanceof globalThis.TouchEvent)&&u.preventDefault(),t.current=!0,s.current=!0,c.current=!1;const i=D(u);if(i){if(g.current=i.clientX,d.current=i.clientY,u.type.toLowerCase().startsWith("touch")||u instanceof globalThis.TouchEvent){t.current=!1,l.current=!0,m({x:i.clientX,y:i.clientY});return}e.current=setTimeout(()=>{if(!t.current||c.current)return;t.current=!1,l.current=!0;const p=D(u);if(!p)return;const{clientX:f,clientY:a}=p;m({x:f,y:a})},300)}},[n]),E=S(({event:o,notDragCallback:m,dragStartCallback:u,moveingCallback:i})=>{if(!s.current)return;const p=o instanceof Event?o:o.nativeEvent,f=D(p);if(!f)return;const{clientX:a,clientY:T}=f,w=Math.abs(a-g.current),j=Math.abs(T-d.current);if(t.current&&(p.type.toLowerCase().startsWith("touch")||p instanceof globalThis.TouchEvent)&&(w>b||j>b)){e.current&&(clearTimeout(e.current),e.current=null),c.current=!0,t.current=!1,l.current=!1,m&&m({x:a,y:T}),r.current&&(clearTimeout(r.current),r.current=null),r.current=setTimeout(()=>{s.current&&(g.current=a,d.current=T,t.current=!0,c.current=!1,v({event:o,dragStartCallback:u}))},400);return}!l.current||t.current||i({x:a,y:T})},[n]),x=S(({event:o,dragEndCallback:m})=>{if(c.current=!1,s.current=!1,t.current){t.current=!1,e.current&&(clearTimeout(e.current),e.current=null);return}const u=o instanceof Event?o:o.nativeEvent;if(!l.current)return;l.current=!1;const i=D(u);if(!i)return;const{clientX:p,clientY:f}=i;m({x:p,y:f})},[n]);return{handleStart:v,handleMove:E,handleEnd:x}},M=new h,te=n=>{M.next(n)},ne=()=>{const[n,r]=N(null);return C(()=>{const e=M.subscribe(b=>{b&&r(b)});return()=>{e&&e.unsubscribe()}},[]),{folderEvent:n}};export{_ as allSplitScreenCount,J as dragState,R as dragStateSubject,A as dropMovementEventSubject,M as folderEventSubject,Q as isResizingSubject,Z as resizeDragSubject,te as setFolderEvent,$ as useDragCapture,ee as useDragEvents,ne as useFolderEvent};
+import X from"fast-deep-equal/react";import{useCallback as S,useEffect as C,useRef as y,useState as N}from"react";import{animationFrameScheduler as F,auditTime as Y,BehaviorSubject as O,distinctUntilChanged as P,map as L,Subject as h}from"rxjs";import{getClientXy as D}from"../utils/FlexLayoutUtils";const R=new h,J=R,Q=new O(!1),Z=new h,B=n=>{const{children:r,...e}=n||{};return e},$=n=>{const[r,e]=N(null);return C(()=>{const b=R.pipe(Y(0,F),L(c=>{if(!n||!n.current)return null;const{x:t,y:s}=c,l=n.current.getBoundingClientRect(),{width:g,height:d,x:v,y:E,right:x,bottom:o}=l;let m=!1;(t<v||t>x||s<E||s>o)&&(m=!0);const u=v+g*.2,i=x-g*.2,p=E+d*.2,f=o-d*.2;let a="centerBoundary";return t<u?a="leftBoundary":t>i?a="rightBoundary":s<p?a="topBoundary":s>f&&(a="bottomBoundary"),{positionName:a,isOver:m,...c}}),P((c,t)=>{const{children:s,...l}=c||{},{children:g,...d}=t||{};return X(B(l),B(d))})).subscribe({next:e,error:c=>console.error(c)});return()=>b.unsubscribe()},[n]),r},A=new h,_=new O(0),ee=({isBlockingActiveInput:n=!1})=>{const r=y(null),e=y(null),b=10,c=y(!1),t=y(!1),s=y(!1),l=y(!1),g=y(0),d=y(0);C(()=>()=>{r.current&&(clearTimeout(r.current),r.current=null),e.current&&(clearTimeout(e.current),e.current=null)},[]);const v=S(({event:o,dragStartCallback:m})=>{const u=o instanceof Event?o:o.nativeEvent;if(r.current&&(clearTimeout(r.current),r.current=null),e.current&&(clearTimeout(e.current),e.current=null),u.target.contentEditable==="true"||n&&document.activeElement===u.target)return;u.cancelable&&!(u instanceof globalThis.TouchEvent)&&u.preventDefault(),t.current=!0,s.current=!0,c.current=!1;const i=D(u);if(i){if(g.current=i.clientX,d.current=i.clientY,u.type.toLowerCase().startsWith("touch")||u instanceof globalThis.TouchEvent){t.current=!1,l.current=!0,m({x:i.clientX,y:i.clientY});return}e.current=setTimeout(()=>{if(!t.current||c.current)return;t.current=!1,l.current=!0;const p=D(u);if(!p)return;const{clientX:f,clientY:a}=p;m({x:f,y:a})},300)}},[n]),E=S(({event:o,notDragCallback:m,dragStartCallback:u,moveingCallback:i})=>{if(!s.current)return;const p=o instanceof Event?o:o.nativeEvent,f=D(p);if(!f)return;const{clientX:a,clientY:T}=f,w=Math.abs(a-g.current),j=Math.abs(T-d.current);if(t.current&&(p.type.toLowerCase().startsWith("touch")||p instanceof globalThis.TouchEvent)&&(w>b||j>b)){e.current&&(clearTimeout(e.current),e.current=null),c.current=!0,t.current=!1,l.current=!1,m&&m({x:a,y:T}),r.current&&(clearTimeout(r.current),r.current=null),r.current=setTimeout(()=>{s.current&&(g.current=a,d.current=T,t.current=!0,c.current=!1,v({event:o,dragStartCallback:u}))},400);return}!l.current||t.current||i({x:a,y:T})},[n]),x=S(({event:o,dragEndCallback:m})=>{if(c.current=!1,s.current=!1,t.current){t.current=!1,e.current&&(clearTimeout(e.current),e.current=null);return}const u=o instanceof Event?o:o.nativeEvent;if(!l.current)return;l.current=!1;const i=D(u);if(!i)return;const{clientX:p,clientY:f}=i;m({x:p,y:f})},[n]);return{handleStart:v,handleMove:E,handleEnd:x}},M=new h,te=n=>{M.next(n)},ne=()=>{const[n,r]=N(null);return C(()=>{const e=M.subscribe(b=>{b&&r(b)});return()=>{e&&e.unsubscribe()}},[]),{folderEvent:n}};export{_ as allSplitScreenCount,J as dragState,R as dragStateSubject,A as dropMovementEventSubject,M as folderEventSubject,Q as isResizingSubject,Z as resizeDragSubject,te as setFolderEvent,$ as useDragCapture,ee as useDragEvents,ne as useFolderEvent};

package/dist/flex-layout/hooks/useSizes.cjs

@@ -1 +1 @@
-"use strict";var b=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var h=(n,e)=>{for(var r in e)b(n,r,{get:e[r],enumerable:!0})},R=(n,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!v.call(n,t)&&t!==r&&b(n,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return n};var E=n=>R(b({},"__esModule",{value:!0}),n);var C={};h(C,{useFirstChildSize:()=>O,useSize:()=>w});module.exports=E(C);var u=require("react"),c=require("rxjs");const w=n=>{const e=(0,u.useRef)(null),[r,i]=(0,u.useState)(void 0);return(0,u.useLayoutEffect)(()=>{if(!e.current)return;const t=()=>{if(e.current){const d=e.current.getBoundingClientRect()[n];i(d)}};t();const s=new ResizeObserver(()=>{t()});return s.observe(e.current),window.addEventListener("resize",t),()=>{s.disconnect(),window.removeEventListener("resize",t)}},[n]),{ref:e,size:r}},O=n=>{const e=(0,u.useRef)(null),[r,i]=(0,u.useState)();return(0,u.useEffect)(()=>{!e.current||!e.current.children[0]||(!r||r.length===0)&&i([e.current.getBoundingClientRect()[n],e.current.children[0].getBoundingClientRect()[n]])},[]),(0,u.useEffect)(()=>{if(!e.current||!e.current.children[0])return;const t=new MutationObserver((o,M)=>{o.forEach(S=>{if(!e.current||!r||!e.current.children[0])return;const a=e.current.getBoundingClientRect()[n];i([a,e.current.children[0].getBoundingClientRect()[n]])})});t.observe(e.current,{childList:!0,subtree:!0});let s=!1;const d=(0,c.fromEvent)(window,"resize").pipe((0,c.distinctUntilChanged)(),(0,c.filter)(()=>document.activeElement?.tagName!=="INPUT"&&!s)).subscribe(o=>{!e.current||!e.current.children[0]||i([e.current.getBoundingClientRect()[n],e.current.children[0].getBoundingClientRect()[n]])}),f=(0,c.fromEvent)(document,"focusout").pipe((0,c.auditTime)(1e3),(0,c.filter)(o=>document.activeElement?.tagName!=="INPUT")).subscribe({next:()=>{s&&(s=!1)}}),l=(0,c.fromEvent)(document,"focusin").subscribe({next:o=>s=o.target.tagName==="INPUT"});return()=>{d.unsubscribe(),f.unsubscribe(),l.unsubscribe(),t.disconnect()}},[n,r]),{ref:e,sizes:r}};0&&(module.exports={useFirstChildSize,useSize});
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},h=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of R(e))!v.call(t,i)&&i!==n&&d(t,i,{get:()=>e[i],enumerable:!(r=m(e,i))||r.enumerable});return t};var E=t=>h(d({},"__esModule",{value:!0}),t);var D={};g(D,{useFirstChildSize:()=>O,useSize:()=>M});module.exports=E(D);var u=require("react"),c=require("rxjs");const M=(t,e)=>{const n=(0,u.useRef)(null),r=e??n,[i,s]=(0,u.useState)(void 0);return(0,u.useLayoutEffect)(()=>{if(!r.current)return;const o=()=>{if(r.current){const f=r.current.getBoundingClientRect()[t];s(f)}};o();const b=new ResizeObserver(()=>{o()});return b.observe(r.current),window.addEventListener("resize",o),()=>{b.disconnect(),window.removeEventListener("resize",o)}},[t]),{ref:r,size:i}},O=t=>{const e=(0,u.useRef)(null),[n,r]=(0,u.useState)();return(0,u.useEffect)(()=>{!e.current||!e.current.children[0]||(!n||n.length===0)&&r([e.current.getBoundingClientRect()[t],e.current.children[0].getBoundingClientRect()[t]])},[]),(0,u.useEffect)(()=>{if(!e.current||!e.current.children[0])return;const i=new MutationObserver((l,w)=>{l.forEach(y=>{if(!e.current||!n||!e.current.children[0])return;const a=e.current.getBoundingClientRect()[t];r([a,e.current.children[0].getBoundingClientRect()[t]])})});i.observe(e.current,{childList:!0,subtree:!0});let s=!1;const o=(0,c.fromEvent)(window,"resize").pipe((0,c.distinctUntilChanged)(),(0,c.filter)(()=>document.activeElement?.tagName!=="INPUT"&&!s)).subscribe(l=>{!e.current||!e.current.children[0]||r([e.current.getBoundingClientRect()[t],e.current.children[0].getBoundingClientRect()[t]])}),b=(0,c.fromEvent)(document,"focusout").pipe((0,c.auditTime)(1e3),(0,c.filter)(l=>document.activeElement?.tagName!=="INPUT")).subscribe({next:()=>{s&&(s=!1)}}),f=(0,c.fromEvent)(document,"focusin").subscribe({next:l=>s=l.target.tagName==="INPUT"});return()=>{o.unsubscribe(),b.unsubscribe(),f.unsubscribe(),i.disconnect()}},[t,n]),{ref:e,sizes:n}};0&&(module.exports={useFirstChildSize,useSize});

package/dist/flex-layout/hooks/useSizes.d.ts

@@ -1,8 +1,11 @@
-export declare const useSize: (sizeName: "height" | "width") => {
-    ref: import("react").RefObject<HTMLDivElement>;
+import { MutableRefObject, RefObject } from "react";
+type DivRef = MutableRefObject<HTMLDivElement | null> | RefObject<HTMLDivElement | null>;
+export declare const useSize: (sizeName: "height" | "width", externalRef?: DivRef) => {
+    ref: MutableRefObject<HTMLDivElement | null>;
     size: number | undefined;
 };
 export declare const useFirstChildSize: (sizeName: string) => {
-    ref: import("react").RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement>;
     sizes: number[] | undefined;
 };
+export {};

package/dist/flex-layout/hooks/useSizes.js

@@ -1 +1 @@
-import{useEffect as d,useLayoutEffect as v,useRef as b,useState as f}from"react";import{auditTime as h,distinctUntilChanged as R,filter as l,fromEvent as o}from"rxjs";const M=n=>{const e=b(null),[t,u]=f(void 0);return v(()=>{if(!e.current)return;const r=()=>{if(e.current){const s=e.current.getBoundingClientRect()[n];u(s)}};r();const c=new ResizeObserver(()=>{r()});return c.observe(e.current),window.addEventListener("resize",r),()=>{c.disconnect(),window.removeEventListener("resize",r)}},[n]),{ref:e,size:t}},S=n=>{const e=b(null),[t,u]=f();return d(()=>{!e.current||!e.current.children[0]||(!t||t.length===0)&&u([e.current.getBoundingClientRect()[n],e.current.children[0].getBoundingClientRect()[n]])},[]),d(()=>{if(!e.current||!e.current.children[0])return;const r=new MutationObserver((i,E)=>{i.forEach(w=>{if(!e.current||!t||!e.current.children[0])return;const g=e.current.getBoundingClientRect()[n];u([g,e.current.children[0].getBoundingClientRect()[n]])})});r.observe(e.current,{childList:!0,subtree:!0});let c=!1;const s=o(window,"resize").pipe(R(),l(()=>document.activeElement?.tagName!=="INPUT"&&!c)).subscribe(i=>{!e.current||!e.current.children[0]||u([e.current.getBoundingClientRect()[n],e.current.children[0].getBoundingClientRect()[n]])}),a=o(document,"focusout").pipe(h(1e3),l(i=>document.activeElement?.tagName!=="INPUT")).subscribe({next:()=>{c&&(c=!1)}}),m=o(document,"focusin").subscribe({next:i=>c=i.target.tagName==="INPUT"});return()=>{s.unsubscribe(),a.unsubscribe(),m.unsubscribe(),r.disconnect()}},[n,t]),{ref:e,sizes:t}};export{S as useFirstChildSize,M as useSize};
+import{useEffect as f,useLayoutEffect as v,useRef as d,useState as a}from"react";import{auditTime as g,distinctUntilChanged as h,filter as m,fromEvent as b}from"rxjs";const C=(t,e)=>{const r=d(null),n=e??r,[s,c]=a(void 0);return v(()=>{if(!n.current)return;const u=()=>{if(n.current){const l=n.current.getBoundingClientRect()[t];c(l)}};u();const o=new ResizeObserver(()=>{u()});return o.observe(n.current),window.addEventListener("resize",u),()=>{o.disconnect(),window.removeEventListener("resize",u)}},[t]),{ref:n,size:s}},S=t=>{const e=d(null),[r,n]=a();return f(()=>{!e.current||!e.current.children[0]||(!r||r.length===0)&&n([e.current.getBoundingClientRect()[t],e.current.children[0].getBoundingClientRect()[t]])},[]),f(()=>{if(!e.current||!e.current.children[0])return;const s=new MutationObserver((i,E)=>{i.forEach(M=>{if(!e.current||!r||!e.current.children[0])return;const R=e.current.getBoundingClientRect()[t];n([R,e.current.children[0].getBoundingClientRect()[t]])})});s.observe(e.current,{childList:!0,subtree:!0});let c=!1;const u=b(window,"resize").pipe(h(),m(()=>document.activeElement?.tagName!=="INPUT"&&!c)).subscribe(i=>{!e.current||!e.current.children[0]||n([e.current.getBoundingClientRect()[t],e.current.children[0].getBoundingClientRect()[t]])}),o=b(document,"focusout").pipe(g(1e3),m(i=>document.activeElement?.tagName!=="INPUT")).subscribe({next:()=>{c&&(c=!1)}}),l=b(document,"focusin").subscribe({next:i=>c=i.target.tagName==="INPUT"});return()=>{u.unsubscribe(),o.unsubscribe(),l.unsubscribe(),s.disconnect()}},[t,r]),{ref:e,sizes:r}};export{S as useFirstChildSize,C as useSize};

package/dist/flex-layout/store/FlexLayoutContainerStore.cjs

@@ -1 +1 @@
-"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},T=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of L(e))!h.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(r=V(e,o))||r.enumerable});return t};var O=(t,e,n)=>(n=t!=null?m(j(t)):{},T(e||!t||!t.__esModule?a(n,"default",{value:t,enumerable:!0}):n,t)),w=t=>T(a({},"__esModule",{value:!0}),t);var J={};D(J,{flexContainerStore:()=>u,flexResizePanelStore:()=>p,getContainerRef:()=>F,getCurrentSplitScreenComponents:()=>B,getLayoutInfos:()=>A,getResizePanelRef:()=>G,getScrollPosition:()=>v,getSplitScreen:()=>q,layoutSplitScreenStore:()=>i,removeRootSplitScreen:()=>H,removeScrollPosition:()=>z,removeSplitScreenChild:()=>M,resetRootSplitScreen:()=>E,scrollPositions:()=>P,setContainerRef:()=>I,setResizePanelRef:()=>U,setScrollPosition:()=>_,setSplitScreen:()=>k});module.exports=w(J);var d=O(require("fast-deep-equal"),1),c=require("rxjs"),s=require("rxjs/operators");function y(t,e){const n=t.getValue();(0,d.default)(n,e)||t.next(e)}function R(t){i.next(t)}const P={},S=new c.BehaviorSubject(P),_=(t,e)=>{const n=S.getValue(),r=n[t];if(r&&r.x===e.x&&r.y===e.y)return;const o={...n,[t]:e};y(S,o)},v=t=>S.pipe((0,s.filter)(e=>e[t]!==void 0),(0,s.map)(e=>e[t]),(0,s.distinctUntilChanged)((e,n)=>e?.x===n?.x&&e?.y===n?.y)),z=t=>{const e=S.getValue(),{[t]:n,...r}=e;y(S,r)},i=new c.BehaviorSubject({}),k=(t,e,n)=>{const r=i.getValue(),o={...r[t]||{}};o[e]=n;const g={...r,[t]:o};R(g)},E=t=>{const n={...i.getValue(),[t]:{}};R(n)},H=t=>{const e=i.getValue();if(!e[t])return;const{[t]:n,...r}=e;R(r)},M=(t,e)=>{const n=i.getValue();if(!n[t])return;const r={...n[t]};delete r[e];const o={...n,[t]:r};R(o)},B=(t,e)=>{const n=i.getValue();if(n[t])return n[t][e]},q=(t,e)=>i.pipe((0,s.map)(n=>n[t]?.[e]),(0,s.distinctUntilChanged)((n,r)=>{const o=g=>{const{children:l,component:f,targetComponent:C,x,y:K,...b}=g||{};return b};return(0,d.default)(o(n),o(r))})),u=new c.BehaviorSubject({}),p=new c.BehaviorSubject({}),I=(t,e,n)=>{const r=u.getValue(),o=r[t]||{};if(n===null){if(!(e in o))return;const{[e]:g,...l}=o,f=Object.keys(l).length===0?(()=>{const{[t]:C,...x}=r;return x})():{...r,[t]:l};u.next(f);return}o[e]!==n&&u.next({...r,[t]:{...o,[e]:n}})},U=(t,e,n)=>{const r=p.getValue(),o=r[t]||{};if(n===null){if(!(e in o))return;const{[e]:g,...l}=o,f=Object.keys(l).length===0?(()=>{const{[t]:C,...x}=r;return x})():{...r,[t]:l};p.next(f);return}o[e]!==n&&p.next({...r,[t]:{...o,[e]:n}})},A=t=>(0,c.combineLatest)([u,p]).pipe((0,s.map)(([e,n])=>{const r=e[t]||{},o=n[t]||{};return{container:r,resizePanel:o}}),(0,s.filter)(e=>e.container!==null&&Object.keys(e.container).length>0)),F=({containerName:t,layoutName:e})=>u.pipe((0,s.map)(n=>e?n[e]?.[t]||null:Object.entries(n).find(([r,o])=>n[r][t])?.[1][t]),(0,s.filter)(n=>n!==null)),G=({containerName:t,layoutName:e})=>p.pipe((0,s.map)(n=>e?n[e]?.[t]||null:Object.entries(n).find(([r,o])=>n[r][t])?.[1][t]),(0,s.filter)(n=>n!==null));0&&(module.exports={flexContainerStore,flexResizePanelStore,getContainerRef,getCurrentSplitScreenComponents,getLayoutInfos,getResizePanelRef,getScrollPosition,getSplitScreen,layoutSplitScreenStore,removeRootSplitScreen,removeScrollPosition,removeSplitScreenChild,resetRootSplitScreen,scrollPositions,setContainerRef,setResizePanelRef,setScrollPosition,setSplitScreen});
+"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},C=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of L(e))!h.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(r=j(e,o))||r.enumerable});return t};var D=(t,e,n)=>(n=t!=null?m(V(t)):{},C(e||!t||!t.__esModule?a(n,"default",{value:t,enumerable:!0}):n,t)),O=t=>C(a({},"__esModule",{value:!0}),t);var J={};w(J,{flexContainerStore:()=>u,flexResizePanelStore:()=>p,getContainerRef:()=>F,getCurrentSplitScreenComponents:()=>B,getLayoutInfos:()=>A,getResizePanelRef:()=>G,getScrollPosition:()=>v,getSplitScreen:()=>q,layoutSplitScreenStore:()=>i,removeRootSplitScreen:()=>H,removeScrollPosition:()=>z,removeSplitScreenChild:()=>M,resetRootSplitScreen:()=>E,scrollPositions:()=>y,setContainerRef:()=>I,setResizePanelRef:()=>U,setScrollPosition:()=>_,setSplitScreen:()=>k});module.exports=O(J);var b=D(require("fast-deep-equal/react"),1),c=require("rxjs"),s=require("rxjs/operators");function T(t,e){t.next(e)}function R(t){i.next(t)}const y={},S=new c.BehaviorSubject(y),_=(t,e)=>{const n=S.getValue(),r=n[t];if(r&&r.x===e.x&&r.y===e.y)return;const o={...n,[t]:e};T(S,o)},v=t=>S.pipe((0,s.filter)(e=>e[t]!==void 0),(0,s.map)(e=>e[t]),(0,s.distinctUntilChanged)((e,n)=>e?.x===n?.x&&e?.y===n?.y)),z=t=>{const e=S.getValue(),{[t]:n,...r}=e;T(S,r)},i=new c.BehaviorSubject({}),k=(t,e,n)=>{const r=i.getValue(),o={...r[t]||{}};o[e]=n;const g={...r,[t]:o};R(g)},E=t=>{const n={...i.getValue(),[t]:{}};R(n)},H=t=>{const e=i.getValue();if(!e[t])return;const{[t]:n,...r}=e;R(r)},M=(t,e)=>{const n=i.getValue();if(!n[t])return;const r={...n[t]};delete r[e];const o={...n,[t]:r};R(o)},B=(t,e)=>{const n=i.getValue();if(n[t])return n[t][e]},q=(t,e)=>i.pipe((0,s.map)(n=>n[t]?.[e]),(0,s.distinctUntilChanged)((n,r)=>{const o=g=>{const{children:l,component:f,targetComponent:d,x,y:K,...P}=g||{};return P};return(0,b.default)(o(n),o(r))})),u=new c.BehaviorSubject({}),p=new c.BehaviorSubject({}),I=(t,e,n)=>{const r=u.getValue(),o=r[t]||{};if(n===null){if(!(e in o))return;const{[e]:g,...l}=o,f=Object.keys(l).length===0?(()=>{const{[t]:d,...x}=r;return x})():{...r,[t]:l};u.next(f);return}o[e]!==n&&u.next({...r,[t]:{...o,[e]:n}})},U=(t,e,n)=>{const r=p.getValue(),o=r[t]||{};if(n===null){if(!(e in o))return;const{[e]:g,...l}=o,f=Object.keys(l).length===0?(()=>{const{[t]:d,...x}=r;return x})():{...r,[t]:l};p.next(f);return}o[e]!==n&&p.next({...r,[t]:{...o,[e]:n}})},A=t=>(0,c.combineLatest)([u,p]).pipe((0,s.map)(([e,n])=>{const r=e[t]||{},o=n[t]||{};return{container:r,resizePanel:o}}),(0,s.filter)(e=>e.container!==null&&Object.keys(e.container).length>0)),F=({containerName:t,layoutName:e})=>u.pipe((0,s.map)(n=>e?n[e]?.[t]||null:Object.entries(n).find(([r,o])=>n[r][t])?.[1][t]),(0,s.filter)(n=>n!==null)),G=({containerName:t,layoutName:e})=>p.pipe((0,s.map)(n=>e?n[e]?.[t]||null:Object.entries(n).find(([r,o])=>n[r][t])?.[1][t]),(0,s.filter)(n=>n!==null));0&&(module.exports={flexContainerStore,flexResizePanelStore,getContainerRef,getCurrentSplitScreenComponents,getLayoutInfos,getResizePanelRef,getScrollPosition,getSplitScreen,layoutSplitScreenStore,removeRootSplitScreen,removeScrollPosition,removeSplitScreenChild,resetRootSplitScreen,scrollPositions,setContainerRef,setResizePanelRef,setScrollPosition,setSplitScreen});

package/dist/flex-layout/store/FlexLayoutContainerStore.js

@@ -1 +1 @@
-"use client";import C from"fast-deep-equal";import{BehaviorSubject as x,combineLatest as b}from"rxjs";import{distinctUntilChanged as T,filter as a,map as l}from"rxjs/operators";function y(t,e){const n=t.getValue();C(n,e)||t.next(e)}function R(t){s.next(t)}const m={},u=new x(m),v=(t,e)=>{const n=u.getValue(),r=n[t];if(r&&r.x===e.x&&r.y===e.y)return;const o={...n,[t]:e};y(u,o)},z=t=>u.pipe(a(e=>e[t]!==void 0),l(e=>e[t]),T((e,n)=>e?.x===n?.x&&e?.y===n?.y)),k=t=>{const e=u.getValue(),{[t]:n,...r}=e;y(u,r)},s=new x({}),E=(t,e,n)=>{const r=s.getValue(),o={...r[t]||{}};o[e]=n;const c={...r,[t]:o};R(c)},H=t=>{const n={...s.getValue(),[t]:{}};R(n)},M=t=>{const e=s.getValue();if(!e[t])return;const{[t]:n,...r}=e;R(r)},B=(t,e)=>{const n=s.getValue();if(!n[t])return;const r={...n[t]};delete r[e];const o={...n,[t]:r};R(o)},q=(t,e)=>{const n=s.getValue();if(n[t])return n[t][e]},I=(t,e)=>s.pipe(l(n=>n[t]?.[e]),T((n,r)=>{const o=c=>{const{children:i,component:S,targetComponent:d,x:f,y:V,...P}=c||{};return P};return C(o(n),o(r))})),p=new x({}),g=new x({}),U=(t,e,n)=>{const r=p.getValue(),o=r[t]||{};if(n===null){if(!(e in o))return;const{[e]:c,...i}=o,S=Object.keys(i).length===0?(()=>{const{[t]:d,...f}=r;return f})():{...r,[t]:i};p.next(S);return}o[e]!==n&&p.next({...r,[t]:{...o,[e]:n}})},A=(t,e,n)=>{const r=g.getValue(),o=r[t]||{};if(n===null){if(!(e in o))return;const{[e]:c,...i}=o,S=Object.keys(i).length===0?(()=>{const{[t]:d,...f}=r;return f})():{...r,[t]:i};g.next(S);return}o[e]!==n&&g.next({...r,[t]:{...o,[e]:n}})},F=t=>b([p,g]).pipe(l(([e,n])=>{const r=e[t]||{},o=n[t]||{};return{container:r,resizePanel:o}}),a(e=>e.container!==null&&Object.keys(e.container).length>0)),G=({containerName:t,layoutName:e})=>p.pipe(l(n=>e?n[e]?.[t]||null:Object.entries(n).find(([r,o])=>n[r][t])?.[1][t]),a(n=>n!==null)),J=({containerName:t,layoutName:e})=>g.pipe(l(n=>e?n[e]?.[t]||null:Object.entries(n).find(([r,o])=>n[r][t])?.[1][t]),a(n=>n!==null));export{p as flexContainerStore,g as flexResizePanelStore,G as getContainerRef,q as getCurrentSplitScreenComponents,F as getLayoutInfos,J as getResizePanelRef,z as getScrollPosition,I as getSplitScreen,s as layoutSplitScreenStore,M as removeRootSplitScreen,k as removeScrollPosition,B as removeSplitScreenChild,H as resetRootSplitScreen,m as scrollPositions,U as setContainerRef,A as setResizePanelRef,v as setScrollPosition,E as setSplitScreen};
+"use client";import y from"fast-deep-equal/react";import{BehaviorSubject as x,combineLatest as P}from"rxjs";import{distinctUntilChanged as C,filter as a,map as l}from"rxjs/operators";function T(t,e){t.next(e)}function R(t){s.next(t)}const m={},u=new x(m),v=(t,e)=>{const n=u.getValue(),r=n[t];if(r&&r.x===e.x&&r.y===e.y)return;const o={...n,[t]:e};T(u,o)},z=t=>u.pipe(a(e=>e[t]!==void 0),l(e=>e[t]),C((e,n)=>e?.x===n?.x&&e?.y===n?.y)),k=t=>{const e=u.getValue(),{[t]:n,...r}=e;T(u,r)},s=new x({}),E=(t,e,n)=>{const r=s.getValue(),o={...r[t]||{}};o[e]=n;const c={...r,[t]:o};R(c)},H=t=>{const n={...s.getValue(),[t]:{}};R(n)},M=t=>{const e=s.getValue();if(!e[t])return;const{[t]:n,...r}=e;R(r)},B=(t,e)=>{const n=s.getValue();if(!n[t])return;const r={...n[t]};delete r[e];const o={...n,[t]:r};R(o)},q=(t,e)=>{const n=s.getValue();if(n[t])return n[t][e]},I=(t,e)=>s.pipe(l(n=>n[t]?.[e]),C((n,r)=>{const o=c=>{const{children:i,component:S,targetComponent:d,x:f,y:j,...b}=c||{};return b};return y(o(n),o(r))})),p=new x({}),g=new x({}),U=(t,e,n)=>{const r=p.getValue(),o=r[t]||{};if(n===null){if(!(e in o))return;const{[e]:c,...i}=o,S=Object.keys(i).length===0?(()=>{const{[t]:d,...f}=r;return f})():{...r,[t]:i};p.next(S);return}o[e]!==n&&p.next({...r,[t]:{...o,[e]:n}})},A=(t,e,n)=>{const r=g.getValue(),o=r[t]||{};if(n===null){if(!(e in o))return;const{[e]:c,...i}=o,S=Object.keys(i).length===0?(()=>{const{[t]:d,...f}=r;return f})():{...r,[t]:i};g.next(S);return}o[e]!==n&&g.next({...r,[t]:{...o,[e]:n}})},F=t=>P([p,g]).pipe(l(([e,n])=>{const r=e[t]||{},o=n[t]||{};return{container:r,resizePanel:o}}),a(e=>e.container!==null&&Object.keys(e.container).length>0)),G=({containerName:t,layoutName:e})=>p.pipe(l(n=>e?n[e]?.[t]||null:Object.entries(n).find(([r,o])=>n[r][t])?.[1][t]),a(n=>n!==null)),J=({containerName:t,layoutName:e})=>g.pipe(l(n=>e?n[e]?.[t]||null:Object.entries(n).find(([r,o])=>n[r][t])?.[1][t]),a(n=>n!==null));export{p as flexContainerStore,g as flexResizePanelStore,G as getContainerRef,q as getCurrentSplitScreenComponents,F as getLayoutInfos,J as getResizePanelRef,z as getScrollPosition,I as getSplitScreen,s as layoutSplitScreenStore,M as removeRootSplitScreen,k as removeScrollPosition,B as removeSplitScreenChild,H as resetRootSplitScreen,m as scrollPositions,U as setContainerRef,A as setResizePanelRef,v as setScrollPosition,E as setSplitScreen};

package/dist/flex-layout/styles/FlexLayout.module.css

@@ -2,9 +2,17 @@
 	display: flex;
 	height: 100%;
 	width: 100%;
-	overflow: auto;
 	overflow-wrap: revert;
 	position: relative;
+	--flex-z-resize: 11;
+	--flex-z-resize-hover: 12;
+	--flex-z-resize-cylinder: 13;
+	&[data-scroll-mode="layout"] {
+		overflow: auto;
+	}
+	&[data-scroll-mode="window"] {
+		overflow: visible;
+	}
 	/* -ms-overflow-style: none;
     scrollbar-width: none; */
 	/* &::-webkit-scrollbar {
@@ -13,7 +21,8 @@
 	&[data-direction="column"] {
 		flex-direction: column;
 		& > .flex-resize-panel {
-			height: 4px;
+			height: 1px;
+			min-height: 1px;
 			width: auto;
 			cursor: ns-resize;
 			&:hover > .hover,
@@ -36,7 +45,8 @@
 	&[data-direction="row"] {
 		flex-direction: row;
 		& > .flex-resize-panel {
-			width: 4px;
+			width: 1px;
+			min-width: 1px;
 			height: auto;
 			cursor: ew-resize;
 			&:hover > .hover,
@@ -58,6 +68,10 @@
 	& > .flex-container {
 		overflow: hidden;
 		box-sizing: border-box;
+		&[data-is_sticky="true"] {
+			position: sticky;
+			z-index: calc(var(--flex-z-resize) + 1);
+		}
 		&[data-is_resize_panel="true"] {
 			flex: 1 1 0%;
 		}
@@ -69,13 +83,25 @@
 			height: 100%;
 		}
 	}
+	& > .flex-container[data-is_sticky="true"] + .flex-resize-panel,
+	& > .flex-resize-panel:has(+ .flex-container[data-is_sticky="true"]) {
+		--flex-z-resize-current: calc(var(--flex-z-resize) + 1);
+		--flex-z-resize-hover-current: calc(var(--flex-z-resize-hover) + 1);
+		--flex-z-resize-cylinder-current: calc(
+			var(--flex-z-resize-cylinder) + 1
+		);
+	}
 	& .flex-resize-panel {
+		--flex-z-resize-current: var(--flex-z-resize);
+		--flex-z-resize-hover-current: var(--flex-z-resize-hover);
+		--flex-z-resize-cylinder-current: var(--flex-z-resize-cylinder);
+
 		background-color: rgb(115 115 115);
-		z-index: 1001;
+		z-index: var(--flex-z-resize-current);
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		flex: 0 0 0.1%;
+		flex: 0 0 1px;
 		position: relative;
 		-moz-user-select: -moz-none;
 		-khtml-user-select: none;
@@ -99,7 +125,7 @@
 		& > .hover[data-is_hover],
 		&:active > .hover {
 			background-color: #0066ffb5;
-			z-index: 3002;
+			z-index: var(--flex-z-resize-hover-current);
 			position: absolute;
 			display: block;
 			opacity: 1;
@@ -135,7 +161,7 @@
 			&::after {
 				content: "";
 				position: absolute;
-				z-index: 3002;
+				z-index: var(--flex-z-resize-cylinder-current);
 				background-color: hsla(0, 0%, 54%, 0.32);
 			}
 			&:hover,
@@ -331,7 +357,7 @@
 	& .flex-split-screen-drag-box-title-wrapper-sticky {
 		position: sticky;
 		top: 0;
-		z-index: 2001;
+		z-index: 15;
 		background: #f0f0f0;
 	}
 	& .flex-split-screen-drag-box-title-wrapper {

package/dist/flex-layout/styles/sentinelStyle.module.css

@@ -0,0 +1,11 @@
+.flex-layout-sentinel-style {
+	display: block;
+	width: 0;
+	height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	pointer-events: none;
+	flex: 0 0 0%;
+}

package/dist/flex-layout/types/FlexLayoutTypes.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var d=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of l(e))!s.call(t,n)&&n!==r&&i(t,n,{get:()=>e[n],enumerable:!(o=a(e,n))||o.enumerable});return t};var p=t=>d(i({},"__esModule",{value:!0}),t);var c={};module.exports=p(c);
+"use strict";var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var d=(t,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of a(e))!s.call(t,o)&&o!==r&&i(t,o,{get:()=>e[o],enumerable:!(n=l(e,o))||n.enumerable});return t};var c=t=>d(i({},"__esModule",{value:!0}),t);var p={};module.exports=c(p);

package/dist/flex-layout/types/FlexLayoutTypes.d.ts

@@ -1,8 +1,30 @@
-import { HTMLAttributes, ReactElement, ReactNode, Ref } from "react";
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
 export type ResizePanelMode = "default" | "bottom-cylinder" | "bottom-cylinder-reverse" | "top-cylinder" | "left-cylinder" | "right-cylinder";
 export type Direction = "row" | "column";
+/**
+ * bulldozer : 인접한 패널을 밀어내지만, 달라붙진 않는다.
+ * divorce : 인접한 패널을 밀어내고 서로 달라붙지만, 리사이즈가 시작했던 위치로 되돌아 올 때는 다시 분리된다.
+ * stalker : 인접한 패널끼리 달라붙는다.
+ * default : divorce
+ */
 export type PanelMovementMode = "bulldozer" | "divorce" | "stalker";
 export type FitContent = "width" | "height";
+/**
+ * scrollMode
+ * layout : FlexLayout = overflow : auto
+ * window : FlexLayout = overflow : visible
+ * default : layout
+ */
+export type ScrollMode = "layout" | "window";
+export type StickyMode = {
+    position: "top" | "bottom";
+    offsetPx?: number;
+    /**
+     * 리사이즈 패널도 같이 sticky 동기화.
+     * default : true
+     */
+    stickyResizePanel?: boolean;
+};
 export interface FlexLayoutChildrenType {
     isInitialResizable?: boolean;
     grow?: number;
@@ -14,6 +36,14 @@ export interface FlexLayoutChildrenType {
     containerName: string;
     children: ReactNode;
     className?: string;
+    /**
+     * 컨테이너 스티키 모드
+     * position: top | bottom
+     * offsetPx: sticky offset(px)
+     * zIndex: sticky z-index (default 1003)
+     * stickyResizePanel: 리사이즈 패널도 같이 sticky 처리 (default true)
+     */
+    stickyMode?: StickyMode;
 }
 export interface FlexContainerProps extends FlexLayoutChildrenType {
 }
@@ -26,10 +56,16 @@ export interface FlexLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, "c
     children: ReactElement<FlexLayoutChildrenType>[] | ReactElement<FlexLayoutChildrenType>;
     layoutName: string;
     isSplitScreen?: boolean;
-    ref?: Ref<HTMLDivElement>;
     className?: string;
     panelClassName?: string;
     panelMovementMode?: PanelMovementMode;
+    /**
+     * scrollMode
+     * layout : FlexLayout = overflow : auto
+     * window : FlexLayout = overflow : visible
+     * default : layout
+     */
+    scrollMode?: ScrollMode;
 }
 export type FlexLayoutResizePanelProps = {
     direction: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@byeolnaerim/flex-layout",
-	"version": "0.0.10",
+	"version": "0.0.12",
 	"type": "module",
 	"license": "Apache-2.0",
 	"author": "Joohyoung Kim (@oozu1994)",