@byeolnaerim/flex-layout 0.0.9 → 0.0.12

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

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

@@ -1,68 +1 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FlexLayoutIFramePane_exports = {};
-__export(FlexLayoutIFramePane_exports, {
-  FlexLayoutIFramePane: () => FlexLayoutIFramePane
-});
-module.exports = __toCommonJS(FlexLayoutIFramePane_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_rxjs = require("rxjs");
-var import_hooks = require("../hooks");
-function FlexLayoutIFramePane({
-  url,
-  screenKey
-}) {
-  const [blockPointer, setBlockPointer] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    const draggingSubject = import_hooks.dragStateSubject.pipe(
-      (0, import_rxjs.map)((s) => !!s?.isDragging),
-      (0, import_rxjs.startWith)(false),
-      (0, import_rxjs.distinctUntilChanged)()
-    );
-    const sub = (0, import_rxjs.combineLatest)([draggingSubject, import_hooks.isResizingSubject]).pipe(
-      (0, import_rxjs.map)(([dragging, resizing]) => dragging || resizing),
-      (0, import_rxjs.distinctUntilChanged)()
-    ).subscribe(setBlockPointer);
-    return () => sub.unsubscribe();
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "iframe",
-    {
-      src: url,
-      style: {
-        width: "100%",
-        height: "100%",
-        border: 0,
-        //리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지
-        pointerEvents: blockPointer ? "none" : "auto"
-      },
-      sandbox: "allow-same-origin allow-scripts allow-forms allow-popups",
-      referrerPolicy: "no-referrer",
-      loading: "lazy"
-    },
-    screenKey
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  FlexLayoutIFramePane
-});
-//# sourceMappingURL=FlexLayoutIFramePane.cjs.map
+"use strict";"use client";var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},y=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of f(e))!m.call(t,i)&&i!==o&&c(t,i,{get:()=>e[i],enumerable:!(s=b(e,i))||s.enumerable});return t};var h=t=>y(c({},"__esModule",{value:!0}),t);var S={};d(S,{FlexLayoutIFramePane:()=>w});module.exports=h(S);var u=require("react/jsx-runtime"),n=require("react"),r=require("rxjs"),a=require("../hooks");function w({url:t,screenKey:e}){const[o,s]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{const i=a.dragStateSubject.pipe((0,r.map)(l=>!!l?.isDragging),(0,r.startWith)(!1),(0,r.distinctUntilChanged)()),g=(0,r.combineLatest)([i,a.isResizingSubject]).pipe((0,r.map)(([l,p])=>l||p),(0,r.distinctUntilChanged)()).subscribe(s);return()=>g.unsubscribe()},[]),(0,u.jsx)("iframe",{src:t,style:{width:"100%",height:"100%",border:0,pointerEvents:o?"none":"auto"},sandbox:"allow-same-origin allow-scripts allow-forms allow-popups",referrerPolicy:"no-referrer",loading:"lazy"},e)}0&&(module.exports={FlexLayoutIFramePane});

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

@@ -1,44 +1 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { combineLatest, distinctUntilChanged, map, startWith } from "rxjs";
-import { dragStateSubject, isResizingSubject } from "../hooks";
-function FlexLayoutIFramePane({
-  url,
-  screenKey
-}) {
-  const [blockPointer, setBlockPointer] = useState(false);
-  useEffect(() => {
-    const draggingSubject = dragStateSubject.pipe(
-      map((s) => !!s?.isDragging),
-      startWith(false),
-      distinctUntilChanged()
-    );
-    const sub = combineLatest([draggingSubject, isResizingSubject]).pipe(
-      map(([dragging, resizing]) => dragging || resizing),
-      distinctUntilChanged()
-    ).subscribe(setBlockPointer);
-    return () => sub.unsubscribe();
-  }, []);
-  return /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      src: url,
-      style: {
-        width: "100%",
-        height: "100%",
-        border: 0,
-        //리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지
-        pointerEvents: blockPointer ? "none" : "auto"
-      },
-      sandbox: "allow-same-origin allow-scripts allow-forms allow-popups",
-      referrerPolicy: "no-referrer",
-      loading: "lazy"
-    },
-    screenKey
-  );
-}
-export {
-  FlexLayoutIFramePane
-};
-//# sourceMappingURL=FlexLayoutIFramePane.js.map
+"use client";import{jsx as d}from"react/jsx-runtime";import{useEffect as u,useState as g}from"react";import{combineLatest as p,distinctUntilChanged as r,map as t,startWith as b}from"rxjs";import{dragStateSubject as f,isResizingSubject as m}from"../hooks";function S({url:i,screenKey:o}){const[s,n]=g(!1);return u(()=>{const a=f.pipe(t(e=>!!e?.isDragging),b(!1),r()),l=p([a,m]).pipe(t(([e,c])=>e||c),r()).subscribe(n);return()=>l.unsubscribe()},[]),d("iframe",{src:i,style:{width:"100%",height:"100%",border:0,pointerEvents:s?"none":"auto"},sandbox:"allow-same-origin allow-scripts allow-forms allow-popups",referrerPolicy:"no-referrer",loading:"lazy"},o)}export{S as FlexLayoutIFramePane};

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

@@ -1,246 +1 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FlexLayoutResizePanel_exports = {};
-__export(FlexLayoutResizePanel_exports, {
-  default: () => FlexLayoutResizePanel
-});
-module.exports = __toCommonJS(FlexLayoutResizePanel_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_hooks = require("../hooks");
-var import_FlexLayoutContainerStore = require("../store/FlexLayoutContainerStore");
-var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
-var import_FlexLayoutUtils = require("../utils/FlexLayoutUtils");
-const flexDirectionModel = {
-  row: {
-    xy: "x",
-    targetDirection: "left",
-    nextDirection: "right",
-    sizeName: "width",
-    resizeCursor: "ew-resize"
-  },
-  column: {
-    xy: "y",
-    targetDirection: "top",
-    nextDirection: "bottom",
-    sizeName: "height",
-    resizeCursor: "ns-resize"
-  }
-};
-function FlexLayoutResizePanel({
-  direction,
-  containerCount,
-  panelMode = "default",
-  containerName,
-  layoutName,
-  panelClassName,
-  panelMovementMode,
-  onResizingChange
-}) {
-  const directionRef = (0, import_react.useRef)(direction);
-  const movementModeRef = (0, import_react.useRef)(panelMovementMode);
-  (0, import_react.useEffect)(() => {
-    directionRef.current = direction;
-  }, [direction]);
-  (0, import_react.useEffect)(() => {
-    movementModeRef.current = panelMovementMode;
-  }, [panelMovementMode]);
-  const isResizePanelClickRef = (0, import_react.useRef)(false);
-  const prevTouchEventRef = (0, import_react.useRef)(null);
-  const parentSizeRef = (0, import_react.useRef)(0);
-  const totalMovementRef = (0, import_react.useRef)(0);
-  const containerCountRef = (0, import_react.useRef)(containerCount);
-  const panelRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    return () => {
-      import_hooks.isResizingSubject.next(false);
-      document.body.style.cursor = "";
-    };
-  }, []);
-  (0, import_react.useEffect)(() => {
-    containerCountRef.current = containerCount;
-  }, [containerCount]);
-  const panelMouseDownEvent = (event) => {
-    if (!panelRef.current || !panelRef.current.parentElement) return;
-    isResizePanelClickRef.current = true;
-    onResizingChange?.(true);
-    containerCountRef.current = [
-      ...panelRef.current.parentElement.children
-    ].filter((e) => e.hasAttribute("data-container_name")).length;
-    const sizeName = flexDirectionModel[direction].sizeName;
-    parentSizeRef.current = panelRef.current.parentElement.getBoundingClientRect()[sizeName];
-    prevTouchEventRef.current = null;
-    totalMovementRef.current = 0;
-    import_hooks.isResizingSubject.next(true);
-    if (!parentSizeRef.current) return;
-    document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
-  };
-  const panelMouseUpEvent = () => {
-    isResizePanelClickRef.current = false;
-    onResizingChange?.(false);
-    parentSizeRef.current = 0;
-    totalMovementRef.current = 0;
-    prevTouchEventRef.current = null;
-    import_hooks.isResizingSubject.next(false);
-    document.body.style.cursor = "";
-  };
-  function moveMouseFlex(originTarget, resizePanel, moveEvent, dir, mode) {
-    const model = flexDirectionModel[dir];
-    const movement = moveEvent["movement" + model.xy.toUpperCase()];
-    totalMovementRef.current += movement;
-    const minSizeName = "min-" + model.sizeName;
-    const maxSizeName = "max-" + model.sizeName;
-    let targetElement = (0, import_FlexLayoutUtils.findNotCloseFlexContent)(
-      originTarget,
-      "previousElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
-      targetElement = originTarget;
-    let nextElement = (0, import_FlexLayoutUtils.findNotCloseFlexContent)(
-      resizePanel.nextElementSibling,
-      "nextElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current < 0 || panelMovementMode === "bulldozer" && movement < 0 || !nextElement)
-      nextElement = resizePanel.nextElementSibling;
-    if (!targetElement || !nextElement) return;
-    const targetRect = targetElement.getBoundingClientRect();
-    const targetStyle = window.getComputedStyle(targetElement);
-    const targetMinSize = parseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;
-    const targetMaxSize = parseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;
-    const nextRect = nextElement.getBoundingClientRect();
-    const nextStyle = window.getComputedStyle(nextElement);
-    const nextMinSize = parseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;
-    const nextMaxSize = parseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;
-    let targetSize = targetRect[model.sizeName] + movement;
-    let nextElementSize = nextRect[model.sizeName] - movement;
-    if (targetMaxSize > 0 && targetSize > targetMaxSize) {
-      return;
-    }
-    if (nextMaxSize > 0 && nextElementSize > nextMaxSize) {
-      return;
-    }
-    if ((0, import_FlexLayoutUtils.isOverMove)(targetSize, targetMinSize)) {
-      targetSize = 0;
-      nextElementSize = nextRect[model.sizeName];
-    } else if ((0, import_FlexLayoutUtils.isOverMove)(nextElementSize, nextMinSize)) {
-      nextElementSize = 0;
-      targetSize = targetRect[model.sizeName];
-    }
-    const targetFlexGrow = targetSize / (parentSizeRef.current - 1) * containerCountRef.current;
-    const nextElementFlexGrow = nextElementSize / (parentSizeRef.current - 1) * containerCountRef.current;
-    if (!(targetElement instanceof HTMLElement)) return;
-    if (!(nextElement instanceof HTMLElement)) return;
-    targetElement.style.flex = `${targetFlexGrow} 1 0%`;
-    nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
-  }
-  (0, import_react.useEffect)(() => {
-    const addGlobalMoveEvent = (event) => {
-      if (!isResizePanelClickRef.current || !panelRef.current) {
-        return;
-      }
-      event.preventDefault();
-      const dir = directionRef.current;
-      const mode = movementModeRef.current;
-      const targetElement = panelRef.current.previousElementSibling;
-      const targetPanel = panelRef.current;
-      if (!targetElement || !targetPanel) return;
-      let move = { movementX: 0, movementY: 0 };
-      if (window.TouchEvent && event instanceof window.TouchEvent) {
-        const prev = prevTouchEventRef.current;
-        if (!prev) {
-          prevTouchEventRef.current = event;
-          return;
-        }
-        move.movementX = (prev.touches[0].pageX - event.touches[0].pageX) * -1;
-        move.movementY = (prev.touches[0].pageY - event.touches[0].pageY) * -1;
-        prevTouchEventRef.current = event;
-      } else {
-        move.movementX = event.movementX;
-        move.movementY = event.movementY;
-      }
-      moveMouseFlex(targetElement, targetPanel, move, dir, mode);
-    };
-    ["mousemove", "touchmove"].forEach((eventName) => {
-      window.addEventListener(eventName, addGlobalMoveEvent, {
-        passive: false
-      });
-    });
-    [
-      "mouseup",
-      "touchend",
-      "touchcancel",
-      // 터치 제스처 시스템 인터럽트
-      "pointerup",
-      // 범용 포인터 이벤트
-      "pointercancel",
-      "blur"
-      // 윈도우 포커스 아웃 (Alt+Tab 등)
-    ].forEach((eventName) => {
-      window.addEventListener(eventName, panelMouseUpEvent);
-    });
-    return () => {
-      ["mousemove", "touchmove"].forEach((eventName) => {
-        window.removeEventListener(eventName, addGlobalMoveEvent);
-      });
-      [
-        "mouseup",
-        "touchend",
-        "touchcancel",
-        // 터치 제스처 시스템 인터럽트
-        "pointerup",
-        // 범용 포인터 이벤트
-        "pointercancel",
-        "blur"
-        // 윈도우 포커스 아웃 (Alt+Tab 등)
-      ].forEach((eventName) => {
-        window.removeEventListener(eventName, panelMouseUpEvent);
-      });
-    };
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (!panelRef.current) return;
-    (0, import_FlexLayoutContainerStore.setResizePanelRef)(layoutName, containerName, panelRef);
-    return () => {
-      (0, import_FlexLayoutContainerStore.setResizePanelRef)(layoutName, containerName, null);
-    };
-  }, [containerName, layoutName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      id: containerName + "_resize_panel",
-      className: `${import_FlexLayout.default["flex-resize-panel"]} ${import_FlexLayout.default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
-      ref: panelRef,
-      onMouseDown: panelMouseDownEvent,
-      onTouchStart: panelMouseDownEvent,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_FlexLayout.default.hover })
-    }
-  );
-}
-//# sourceMappingURL=FlexLayoutResizePanel.cjs.map
+"use strict";"use client";var fe=Object.create;var G=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var Ee=(e,t)=>{for(var n in t)G(e,n,{get:t[n],enumerable:!0})},te=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of pe(t))!ge.call(e,c)&&c!==n&&G(e,c,{get:()=>t[c],enumerable:!(r=de(t,c))||r.enumerable});return e};var ve=(e,t,n)=>(n=e!=null?fe(he(e)):{},te(t||!e||!e.__esModule?G(n,"default",{value:e,enumerable:!0}):n,e)),Me=e=>te(G({},"__esModule",{value:!0}),e);var xe={};Ee(xe,{default:()=>oe});module.exports=Me(xe);var J=require("react/jsx-runtime"),u=require("react"),T=require("../hooks"),K=require("../store/FlexLayoutContainerStore"),C=ve(require("../styles/FlexLayout.module.css"),1),L=require("../utils/FlexLayoutUtils");const j={row:{xy:"x",targetDirection:"left",nextDirection:"right",sizeName:"width",resizeCursor:"ew-resize"},column:{xy:"y",targetDirection:"top",nextDirection:"bottom",sizeName:"height",resizeCursor:"ns-resize"}},h=4,ne=(e,t,n,r)=>{const c=new Map,l=(a,g)=>{const s=document.elementsFromPoint(a,g);for(const m of s){const M=m.closest?.(`.${C.default["flex-resize-panel"]}`);if(!M)continue;const f=M.dataset.resize_panel_key;f&&(c.has(f)||c.set(f,{el:M,key:f,dir:M.dataset.direction}))}};if([[0,0],[-h,0],[h,0],[0,-h],[0,h],[-h,-h],[h,-h],[-h,h],[h,h]].forEach(([a,g])=>l(e+a,t+g)),n&&r){const a=n.getBoundingClientRect(),g=r==="row"?a.width:r==="column"?a.height:1,s=Math.max(1,Math.ceil(g/2)),m=Math.ceil(h+g*2),p=Math.max(h,Math.ceil(g*2)),M=Array.from(new Set([1,Math.floor(p/2),Math.max(1,p-1)]));if(r==="row")for(let f=-m;f<=m;f+=s)for(const b of M)l(a.left-b,t+f),l(a.right+b,t+f);else if(r==="column")for(let f=-m;f<=m;f+=s)for(const b of M)l(e+f,a.top-b),l(e+f,a.bottom+b)}if(r){const g=[...c.values()].filter(s=>s.dir&&s.dir!==r);for(const s of g){const m=s.el.getBoundingClientRect(),p=s.dir==="row"?m.width:s.dir==="column"?m.height:1,M=Math.max(1,Math.ceil(p/2)),f=Math.ceil(h+p*2),b=Math.max(h,Math.ceil(p*2)),F=Array.from(new Set([1,Math.floor(b/2),Math.max(1,b-1)]));if(r==="column"&&s.dir==="row")for(let y=-f;y<=f;y+=M)for(const o of F)l(m.left-o,t+y),l(m.right+o,t+y);else if(r==="row"&&s.dir==="column")for(let y=-f;y<=f;y+=M)for(const o of F)l(e+y,m.top-o),l(e+y,m.bottom+o)}}return[...c.values()]},D=(e,t)=>{if(!e||e==="auto")return null;if(e.endsWith("px")){const r=parseFloat(e);return Number.isFinite(r)?r:null}if(e.endsWith("%")){const r=parseFloat(e);return Number.isFinite(r)?t*r/100:null}const n=parseFloat(e);return Number.isFinite(n)?n:null},ye=(e,t,n)=>e>=n.left&&e<=n.right&&t>=n.top&&t<=n.bottom,be=e=>{const t=e.getBoundingClientRect(),n=getComputedStyle(e,"::after");if(!n||n.content==="none"||n.content==="normal"||n.display==="none"||n.visibility==="hidden")return null;const r=D(n.width,t.width),c=D(n.height,t.height);if(!r||!c)return null;const l=D(n.left,t.width),a=D(n.right,t.width),g=D(n.top,t.height),s=D(n.bottom,t.height);let m=t.left;l!==null?m=t.left+l:a!==null&&(m=t.right-a-r);let p=t.top;return g!==null?p=t.top+g:s!==null&&(p=t.bottom-s-c),{left:m,top:p,right:m+r,bottom:p+c}},re=(e,t,n,r,c)=>{const l=n.getBoundingClientRect(),a=be(n);if(a&&ye(e,t,a))return!1;const g=r==="row"?l.width:r==="column"?l.height:1,s=Math.max(c,Math.ceil(g));return r==="row"?e>=l.left-s&&e<=l.right+s:r==="column"?t>=l.top-s&&t<=l.bottom+s:!0};function oe({direction:e,containerCount:t,panelMode:n="default",containerName:r,layoutName:c,panelClassName:l,panelMovementMode:a,onResizingChange:g}){const s=(0,u.useRef)(e),m=(0,u.useRef)(a),p=(0,u.useMemo)(()=>`${c}::${r}`,[c,r]);(0,u.useEffect)(()=>{s.current=e},[e]),(0,u.useEffect)(()=>{m.current=a},[a]);const M=(0,u.useRef)(!1),f=(0,u.useRef)(null),b=(0,u.useRef)(0),F=(0,u.useRef)(0),y=(0,u.useRef)(t),o=(0,u.useRef)(null),B=(0,u.useRef)(null),k=(0,u.useRef)(null);(0,u.useEffect)(()=>()=>{T.isResizingSubject.next(!1),document.body.style.cursor="",k.current?.()},[]),(0,u.useEffect)(()=>{y.current=t},[t]);const se=()=>{if(!o.current||!o.current.parentElement)return;M.current=!0,g?.(!0),y.current=[...o.current.parentElement.children].filter(i=>i.hasAttribute("data-container_name")).length;const d=j[e].sizeName;b.current=o.current.parentElement.getBoundingClientRect()[d],f.current=null,F.current=0,T.isResizingSubject.next(!0)},ie=()=>{M.current=!1,g?.(!1),b.current=0,F.current=0,B.current=null,T.isResizingSubject.next(!1),document.body.style.cursor="",O()};function le(d,i,x,z,S){const E=j[z],H=x["movement"+E.xy.toUpperCase()];F.current+=H;const A="min-"+E.sizeName,X="max-"+E.sizeName;let R=(0,L.findNotCloseFlexContent)(d,"previousElementSibling");(S==="divorce"&&F.current>0||S==="bulldozer"&&H>0||!R)&&(R=d);let w=(0,L.findNotCloseFlexContent)(i.nextElementSibling,"nextElementSibling");if((S==="divorce"&&F.current<0||S==="bulldozer"&&H<0||!w)&&(w=i.nextElementSibling),!R||!w)return;const N=R.getBoundingClientRect(),$=window.getComputedStyle(R),Y=parseFloat($.getPropertyValue(A))||0,v=parseFloat($.getPropertyValue(X))||0,P=w.getBoundingClientRect(),I=window.getComputedStyle(w),W=parseFloat(I.getPropertyValue(A))||0,ee=parseFloat(I.getPropertyValue(X))||0;let _=N[E.sizeName]+H,V=P[E.sizeName]-H;if(v>0&&_>v||ee>0&&V>ee)return;(0,L.isOverMove)(_,Y)?(_=0,V=P[E.sizeName]):(0,L.isOverMove)(V,W)&&(V=0,_=N[E.sizeName]);const ae=_/(b.current-1)*y.current,me=V/(b.current-1)*y.current;R instanceof HTMLElement&&w instanceof HTMLElement&&(R.style.flex=`${ae} 1 0%`,w.style.flex=`${me} 1 0%`)}(0,u.useEffect)(()=>{const d=T.resizeDragSubject.subscribe(i=>{if(i.type==="START"){if(!i.targets.includes(p))return;B.current=i.sessionId,se(),i.cursor&&(document.body.style.cursor=i.cursor);return}if(i.type==="MOVE"){if(B.current!==i.sessionId||!M.current||!o.current)return;const x=s.current,z=m.current,S=o.current.previousElementSibling,E=o.current;if(!S||!E)return;le(S,E,{movementX:i.movementX,movementY:i.movementY},x,z);return}if(i.type==="END"){if(B.current!==i.sessionId)return;ie()}});return()=>d.unsubscribe()},[p]);const Q=d=>{if(!o.current)return;d.preventDefault?.();const i=d.nativeEvent,x=(0,L.getClientXy)(i);if(!x)return;const z=s.current,S=re(x.clientX,x.clientY,o.current,z,h),E=S?ne(x.clientX,x.clientY,o.current,z):[{el:o.current,key:p,dir:z}],H=new Set([p]);E.forEach(v=>H.add(v.key));const A=[...H],X=S&&A.length>=2?"move":j[z].resizeCursor,R=`${Date.now()}_${Math.random().toString(16).slice(2)}`;T.resizeDragSubject.next({type:"START",sessionId:R,targets:A,cursor:X}),k.current?.();let w=x.clientX,N=x.clientY;const $=v=>{v.preventDefault?.();const P=(0,L.getClientXy)(v);if(!P)return;const I=P.clientX-w,W=P.clientY-N;w=P.clientX,N=P.clientY,T.resizeDragSubject.next({type:"MOVE",sessionId:R,movementX:I,movementY:W})},Y=()=>{k.current?.(),k.current=null,T.resizeDragSubject.next({type:"END",sessionId:R})};["mousemove","touchmove"].forEach(v=>{window.addEventListener(v,$,{passive:!1})}),["mouseup","touchend","touchcancel","pointerup","pointercancel","blur"].forEach(v=>window.addEventListener(v,Y)),k.current=()=>{["mousemove","touchmove"].forEach(v=>window.removeEventListener(v,$)),["mouseup","touchend","touchcancel","pointerup","pointercancel","blur"].forEach(v=>window.removeEventListener(v,Y))}};(0,u.useEffect)(()=>{if(o.current)return(0,K.setResizePanelRef)(c,r,o),()=>{(0,K.setResizePanelRef)(c,r,null)}},[r,c]);const q=(0,u.useRef)([]),U=(0,u.useRef)(null),O=()=>{for(const d of q.current)d.querySelector(`.${C.default.hover}`)?.removeAttribute("data-is_hover");q.current=[]},ce=d=>{O();for(const i of d)i.querySelector(`.${C.default.hover}`)?.setAttribute("data-is_hover","");q.current=d},Z=d=>{o.current&&(U.current&&cancelAnimationFrame(U.current),U.current=requestAnimationFrame(()=>{const i=s.current;if(!re(d.clientX,d.clientY,o.current,i,h)){o.current.style.cursor="",O();return}const S=ne(d.clientX,d.clientY,o.current,i).filter(E=>E.dir&&E.dir!==i).map(E=>E.el);o.current.style.cursor=S.length>0?"move":"",ce(S)}))},ue=()=>{o.current&&(o.current.style.cursor="",O())};return(0,J.jsx)("div",{id:r+"_resize_panel","data-resize_panel_key":p,"data-direction":e,className:`${C.default["flex-resize-panel"]} ${C.default[n]} ${l&&l!==""?l:""}`,ref:o,onMouseDown:Q,onTouchStart:Q,onMouseMove:Z,onMouseEnter:Z,onMouseLeave:ue,children:(0,J.jsx)("div",{className:C.default.hover,"aria-hidden":!0})})}