@byeolnaerim/flex-layout 0.0.9 → 0.0.12

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

@@ -1,110 +1 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FlexLayout_exports = {};
-__export(FlexLayout_exports, {
-  default: () => FlexLayout
-});
-module.exports = __toCommonJS(FlexLayout_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_FlexLayoutHooks = require("../providers/FlexLayoutHooks");
-var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
-var import_FlexLayoutContext = require("../providers/FlexLayoutContext");
-const withFlexLayout = (layoutName, fitContent, containerCount) => (WrappedComponent) => {
-  if (WrappedComponent.type === import_react.Fragment || WrappedComponent.type === "div" || WrappedComponent.type === "span") {
-    return WrappedComponent;
-  }
-  return (0, import_react.cloneElement)(WrappedComponent, {
-    layoutName,
-    fitContent,
-    containerCount
-  });
-};
-function FlexLayout({
-  layoutName,
-  direction,
-  children,
-  ref,
-  className,
-  panelClassName,
-  panelMovementMode = "divorce",
-  ...props
-}) {
-  const containerCount = import_react.Children.count(children);
-  const fitContent = direction === "row" ? "width" : "height";
-  const isFragmentElement = (node) => (0, import_react.isValidElement)(node) && node.type === import_react.Fragment;
-  const nodes = import_react.Children.toArray(children).flatMap(
-    (node) => isFragmentElement(node) ? import_react.Children.toArray(node.props.children) : [node]
-  );
-  const flattenedChildren = nodes.filter(
-    import_react.isValidElement
-  );
-  if (flattenedChildren.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_FlexLayoutContext.FlexLayoutProvider,
-    {
-      value: {
-        layoutName,
-        direction,
-        panelMovementMode,
-        panelClassName,
-        containerCount,
-        fitContent
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: `${import_FlexLayout.default["flex-layout"]} ${className && className !== "" ? className : ""}`,
-          ...ref ? { ref } : {},
-          ...props,
-          "data-layout_name": layoutName,
-          "data-direction": direction,
-          children: flattenedChildren.map((child, index) => {
-            if (!child || !(0, import_react.isValidElement)(child)) return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-              child,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_FlexLayoutHooks.ContainerOpenCloseProvider,
-                {
-                  layoutName,
-                  containerName: child.props.containerName,
-                  sizeName: fitContent
-                }
-              )
-            ] }, index);
-          })
-        }
-      )
-    }
-  ) });
-}
-//# sourceMappingURL=FlexLayout.cjs.map
+"use strict";"use client";var 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,85 +1 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  Children,
-  cloneElement,
-  Fragment as Fragment2,
-  isValidElement
-} from "react";
-import { ContainerOpenCloseProvider } from "../providers/FlexLayoutHooks";
-import styles from "../styles/FlexLayout.module.css";
-import { FlexLayoutProvider } from "../providers/FlexLayoutContext";
-const withFlexLayout = (layoutName, fitContent, containerCount) => (WrappedComponent) => {
-  if (WrappedComponent.type === Fragment2 || WrappedComponent.type === "div" || WrappedComponent.type === "span") {
-    return WrappedComponent;
-  }
-  return cloneElement(WrappedComponent, {
-    layoutName,
-    fitContent,
-    containerCount
-  });
-};
-function FlexLayout({
-  layoutName,
-  direction,
-  children,
-  ref,
-  className,
-  panelClassName,
-  panelMovementMode = "divorce",
-  ...props
-}) {
-  const containerCount = Children.count(children);
-  const fitContent = direction === "row" ? "width" : "height";
-  const isFragmentElement = (node) => isValidElement(node) && node.type === Fragment2;
-  const nodes = Children.toArray(children).flatMap(
-    (node) => isFragmentElement(node) ? Children.toArray(node.props.children) : [node]
-  );
-  const flattenedChildren = nodes.filter(
-    isValidElement
-  );
-  if (flattenedChildren.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    FlexLayoutProvider,
-    {
-      value: {
-        layoutName,
-        direction,
-        panelMovementMode,
-        panelClassName,
-        containerCount,
-        fitContent
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `${styles["flex-layout"]} ${className && className !== "" ? className : ""}`,
-          ...ref ? { ref } : {},
-          ...props,
-          "data-layout_name": layoutName,
-          "data-direction": direction,
-          children: flattenedChildren.map((child, index) => {
-            if (!child || !isValidElement(child)) return null;
-            return /* @__PURE__ */ jsxs(Fragment2, { children: [
-              child,
-              /* @__PURE__ */ jsx(
-                ContainerOpenCloseProvider,
-                {
-                  layoutName,
-                  containerName: child.props.containerName,
-                  sizeName: fitContent
-                }
-              )
-            ] }, index);
-          })
-        }
-      )
-    }
-  ) });
-}
-export {
-  FlexLayout as default
-};
-//# sourceMappingURL=FlexLayout.js.map
+"use client";import{Fragment as 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,262 +1 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FlexLayoutContainer_exports = {};
-__export(FlexLayoutContainer_exports, {
-  default: () => FlexLayoutContainer
-});
-module.exports = __toCommonJS(FlexLayoutContainer_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_useSizes = require("../hooks/useSizes");
-var import_FlexLayoutContext = require("../providers/FlexLayoutContext");
-var import_FlexLayoutContainerStore = require("../store/FlexLayoutContainerStore");
-var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
-var import_FlexLayoutUtils = require("../utils/FlexLayoutUtils");
-var import_FlexLayoutResizePanel = __toESM(require("./FlexLayoutResizePanel"), 1);
-function FlexLayoutContainer({
-  isFitContent,
-  isFitResize,
-  // fitContent,
-  // containerCount,
-  // layoutName,
-  containerName,
-  grow: initialGrow,
-  prevGrow: initialPrevGrow,
-  isInitialResizable,
-  isResizePanel,
-  children,
-  className,
-  panelMode
-}) {
-  const {
-    direction,
-    panelMovementMode,
-    panelClassName,
-    layoutName,
-    fitContent,
-    containerCount
-  } = (0, import_FlexLayoutContext.useFlexLayoutContext)();
-  const { ref, size } = (
-    // isFitContent && fitContent
-    //?
-    (0, import_useSizes.useSize)(fitContent)
-  );
-  const flexContainerNodeRef = (0, import_react.useRef)(null);
-  const isUserResizingRef = (0, import_react.useRef)(false);
-  const handleResizingChange = (0, import_react.useCallback)((v) => {
-    isUserResizingRef.current = v;
-  }, []);
-  const flexContainerRef = (0, import_react.useCallback)(
-    (node) => {
-      flexContainerNodeRef.current = node;
-      if (node) {
-        (0, import_FlexLayoutContainerStore.setContainerRef)(
-          layoutName,
-          containerName,
-          flexContainerNodeRef
-        );
-      } else {
-        (0, import_FlexLayoutContainerStore.setContainerRef)(layoutName, containerName, null);
-      }
-    },
-    [layoutName, containerName]
-  );
-  const [growState, setGrowState] = (0, import_react.useState)(initialGrow);
-  (0, import_react.useEffect)(() => {
-    setGrowState(initialGrow);
-  }, [initialGrow]);
-  const [prevGrowState, setPrevGrowState] = (0, import_react.useState)(
-    initialPrevGrow
-  );
-  const [isFirstLoad, setIsFirstLoad] = (0, import_react.useState)(true);
-  (0, import_react.useEffect)(() => {
-    if (typeof window == "undefined" || flexContainerNodeRef.current === null)
-      return;
-    const storedGrow = sessionStorage.getItem(containerName);
-    if (storedGrow !== null) {
-      const parsed = parseFloat(storedGrow);
-      if (!isNaN(parsed)) {
-        flexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;
-        setGrowState(parsed);
-      }
-    }
-  }, [containerName]);
-  (0, import_react.useEffect)(() => {
-    if (!flexContainerNodeRef.current) return;
-    const targetNode = flexContainerNodeRef.current;
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === "attributes" && mutation.attributeName === "style" && targetNode.style.flex) {
-          const flexValue = targetNode.style.flex;
-          const parsedGrow = parseFloat(flexValue.split(" ")[0]);
-          if (!isNaN(parsedGrow)) {
-            setGrowState(parsedGrow);
-          }
-        }
-      }
-    });
-    observer.observe(targetNode, {
-      attributes: true,
-      attributeFilter: ["style"],
-      attributeOldValue: true
-    });
-    return () => {
-      observer.disconnect();
-    };
-  }, [containerName]);
-  (0, import_react.useEffect)(() => {
-    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent || // getGrow(flexContainerNodeRef.current) == 0 ||
-    isUserResizingRef.current)
-      return;
-    requestAnimationFrame(() => {
-      if (!flexContainerNodeRef.current) return;
-      const sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;
-      const parentSize = flexContainerNodeRef.current.parentElement && flexContainerNodeRef.current.parentElement["client" + sizeName] || 0;
-      if (isFitContent) {
-        flexContainerNodeRef.current.style["max" + sizeName] = size + "px";
-      }
-      if (!isFitResize && isFirstLoad) {
-        setIsFirstLoad(false);
-        return;
-      }
-      if ((0, import_FlexLayoutUtils.getGrow)(flexContainerNodeRef.current) != 0 && isFitResize) {
-        const newGrow = (0, import_FlexLayoutUtils.mathGrow)(size, parentSize, containerCount);
-        setPrevGrowState(growState);
-        setGrowState(newGrow);
-      }
-    });
-  }, [size, containerCount, isFitResize, children]);
-  (0, import_react.useEffect)(() => {
-    if (!flexContainerNodeRef.current) return;
-    let notGrowList = [];
-    let containerList = [
-      ...flexContainerNodeRef.current.parentElement?.children || []
-    ].filter((e) => e.hasAttribute("data-container_name"));
-    let remainingGrow = containerList.reduce((t, e, i) => {
-      let item = e;
-      if (item.classList.contains(import_FlexLayout.default["flex-resize-panel"])) return t;
-      if (e.hasAttribute("data-grow") == false || e.getAttribute("data-is_resize") === "true") {
-        notGrowList.push(item);
-        return t;
-      }
-      let grow = parseFloat(item.dataset.grow || "");
-      item.style.flex = `${grow} 1 0%`;
-      t -= grow;
-      return t;
-    }, containerList.length);
-    if (notGrowList.length != 0) {
-      let resizeWeight = (0, import_FlexLayoutUtils.mathWeight)(notGrowList.length, remainingGrow);
-      notGrowList.forEach((e) => {
-        e.dataset.grow = resizeWeight.toString();
-        e.style.flex = `${resizeWeight} 1 0%`;
-      });
-    }
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (!flexContainerNodeRef.current || !isFitContent || !fitContent || !size || (0, import_FlexLayoutUtils.getGrow)(flexContainerNodeRef.current) == 0)
-      return;
-    const parent = flexContainerNodeRef.current.parentElement;
-    if (!parent) return;
-    const sizeName = fitContent.charAt(0).toUpperCase() + fitContent.substring(1);
-    const parentSize = parent["client" + sizeName] || 0;
-    if (!parentSize || containerCount <= 0) return;
-    const nextGrowRaw = (0, import_FlexLayoutUtils.mathGrow)(size, parentSize, containerCount);
-    const nextGrow = Math.min(containerCount, Math.max(0, nextGrowRaw));
-    const currentGrow = (0, import_FlexLayoutUtils.getGrow)(flexContainerNodeRef.current);
-    if (Math.abs(nextGrow - currentGrow) < 1e-3) return;
-    setPrevGrowState(currentGrow);
-    setGrowState(nextGrow);
-    const containers = [...parent.children || []].filter((el) => {
-      const item = el;
-      return item.hasAttribute("data-container_name") && !item.classList.contains(import_FlexLayout.default["flex-resize-panel"]);
-    });
-    const siblings = containers.filter(
-      (el) => el !== flexContainerNodeRef.current
-    );
-    const adjustable = siblings.filter((el) => el.style.flex !== "0 1 0%");
-    const remaining = containerCount - nextGrow;
-    if (remaining <= 0 || adjustable.length === 0) return;
-    const oldSum = adjustable.reduce((sum, el) => sum + (0, import_FlexLayoutUtils.getGrow)(el), 0);
-    if (oldSum <= 0) {
-      const each = remaining / adjustable.length;
-      adjustable.forEach((el) => {
-        el.dataset.grow = each.toString();
-        el.style.flex = `${each} 1 0%`;
-      });
-    } else {
-      adjustable.forEach((el) => {
-        const g = (0, import_FlexLayoutUtils.getGrow)(el);
-        const scaled = remaining * (g / oldSum);
-        el.dataset.grow = scaled.toString();
-        el.style.flex = `${scaled} 1 0%`;
-      });
-    }
-  }, [size, isFitContent, fitContent, containerCount]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        id: containerName,
-        "data-container_name": containerName,
-        ref: flexContainerRef,
-        className: `${import_FlexLayout.default["flex-container"]} ${className && className !== "" ? className : ""}`,
-        ...growState !== void 0 ? { ["data-grow"]: growState } : {},
-        ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
-        "data-is_resize": isInitialResizable,
-        "data-is_resize_panel": isResizePanel,
-        style: growState !== void 0 && {
-          flex: `${growState} 1 0%`
-        } || {},
-        children: isFitContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: `${import_FlexLayout.default["flex-content-fit-wrapper"]}`,
-            ref,
-            children
-          }
-        ) || children
-      }
-    ),
-    isResizePanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_FlexLayoutResizePanel.default,
-      {
-        containerName,
-        layoutName,
-        direction,
-        containerCount,
-        panelMode,
-        panelClassName,
-        panelMovementMode,
-        onResizingChange: handleResizingChange
-      }
-    )
-  ] });
-}
-//# sourceMappingURL=FlexLayoutContainer.cjs.map
+"use strict";"use client";var 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;