@viasat/beam-react 2.30.0 → 2.37.0

package/lib/wip/Panel/Panel.Overlay.es.js

@@ -1,115 +1,141 @@
-import { jsx as t, jsxs as R } from "react/jsx-runtime";
-import h from "clsx";
-import { g as F } from "../../../chunks/classNames.BTJmrO_L.js";
+import { jsx as n, jsxs as B } from "react/jsx-runtime";
+import D from "clsx";
+import { useCallback as S, useMemo as $ } from "react";
+import { g } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { PanelContext as I } from "./Panel.context.es.js";
-import { getPanelDismissConfig as B } from "./Panel.helpers.es.js";
-import { FloatingUIRoot as D } from "../../FloatingUI/FloatingUI.root.es.js";
-import { Content as M } from "../../FloatingUI/FloatingUI.content.es.js";
-import { a as _ } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
-import { InlineDivider as $ } from "./Panel.Divider.es.js";
-import { PanelResizeHandle as b } from "./Panel.ResizeHandle.es.js";
-import { usePanelResize as j } from "./Panel.useResize.es.js";
-import { s as x } from "../../../chunks/panel.module.BblnuBjO.js";
-const { baseClassNamePrefix: y, variable: C } = F("panel"), k = ({
-  children: i,
-  panelClassName: l,
+import { PanelContext as j } from "./Panel.context.es.js";
+import { getPanelDismissConfig as A } from "./Panel.helpers.es.js";
+import { FloatingUIRoot as U } from "../../FloatingUI/FloatingUI.root.es.js";
+import { Content as q } from "../../FloatingUI/FloatingUI.content.es.js";
+import { a as E } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
+import { InlineDivider as H } from "./Panel.Divider.es.js";
+import { PanelResizeHandle as w } from "./Panel.ResizeHandle.es.js";
+import { usePanelResize as z } from "./Panel.useResize.es.js";
+import { s as h } from "../../../chunks/panel.module.CnHWv4EZ.js";
+const { baseClassNamePrefix: k, variable: F } = g("panel");
+function G(s, e, o) {
+  if (!(!s && !e && !o))
+    return {
+      ...s,
+      ...e,
+      ...o ? {
+        [F("offset-x")]: o.x,
+        [F("offset-y")]: o.y
+      } : null
+    };
+}
+const J = ({
+  children: s,
+  panelClassName: e,
   resolvedPosition: o,
-  showDivider: n,
-  dividerColor: e,
+  showDivider: u,
+  dividerColor: t,
   resizeConfig: a,
-  floatingOffset: r,
-  overlayDividerClassName: m,
-  isBlocking: f,
-  skipMountAnimation: c,
-  style: s,
-  ...p
+  floatingOffset: c,
+  overlayDividerClassName: f,
+  isBlocking: d,
+  sizeStyle: p,
+  skipMountAnimation: v,
+  container: m,
+  style: x,
+  ...C
 }) => {
-  const { refs: d } = _(), { handleRef: u } = j({
+  const { refs: y } = E(), { handleRef: l } = z({
     resizeConfig: a,
     position: o,
-    floatingRef: d.floating,
-    requireMount: !0
-  }), g = r ? {
-    ...s,
-    [C("offset-x")]: r.x,
-    [C("offset-y")]: r.y
-  } : s;
-  return /* @__PURE__ */ R(
-    M,
+    floatingRef: y.floating,
+    requireMount: !0,
+    container: m
+  }), r = G(x, p, c);
+  return /* @__PURE__ */ B(
+    q,
     {
-      className: l,
+      className: e,
       skipFloatingStyles: !0,
-      overlay: f,
-      ...p,
-      style: g,
+      overlay: d ? m ? { lockScroll: !1 } : !0 : !1,
+      ...C,
+      style: r,
       "data-position": o,
-      ...c ? { "data-status": "open" } : {},
+      ...v ? { "data-status": "open" } : {},
       children: [
-        i,
-        n && /* @__PURE__ */ t(
-          $,
+        s,
+        u && /* @__PURE__ */ n(
+          H,
           {
             position: o,
-            className: m,
-            dividerColor: e
+            className: f,
+            dividerColor: t
           }
         ),
-        a && /* @__PURE__ */ t(b, { ref: u })
+        a && /* @__PURE__ */ n(w, { ref: l })
       ]
     }
   );
-}, Q = ({
-  contextValue: i,
-  panelClassName: l,
+}, so = ({
+  contextValue: s,
+  panelClassName: e,
   resolvedPosition: o,
-  showDivider: n,
-  modalType: e,
+  showDivider: u,
+  modalType: t,
   closeOnOutsidePress: a,
-  floatingOffset: r,
-  open: m,
-  onOpenChange: f,
-  transitionConfig: c,
-  dividerColor: s,
-  children: p,
-  resizeConfig: d,
-  skipMountAnimation: u,
-  ...g
+  floatingOffset: c,
+  open: f,
+  onOpenChange: d,
+  transitionConfig: p,
+  dividerColor: v,
+  children: m,
+  resizeConfig: x,
+  sizeStyle: C,
+  skipMountAnimation: y,
+  container: l,
+  triggerRef: r,
+  ...I
 }) => {
-  const v = e === "isModal" || e === "alert", N = B(e, a), P = h(
-    x[`${y}__overlay-divider`],
-    x[`${y}__overlay-divider--${o}`]
+  const N = t === "isModal" || t === "alert", M = S(
+    (i) => {
+      const P = (r == null ? void 0 : r.current) ?? null;
+      return !(P && i.target instanceof Node && P.contains(i.target));
+    },
+    [r]
+  ), _ = $(() => {
+    const i = A(t, a);
+    return !r || !(t === "isModal" || t !== "alert" && !!a) ? i : { ...i ?? {}, outsidePress: M };
+  }, [t, a, r, M]), b = D(
+    h[`${k}__overlay-divider`],
+    h[`${k}__overlay-divider--${o}`]
   );
-  return /* @__PURE__ */ t(I.Provider, { value: i, children: /* @__PURE__ */ t(
-    D,
+  return /* @__PURE__ */ n(j.Provider, { value: s, children: /* @__PURE__ */ n(
+    U,
     {
-      open: m,
-      onOpenChange: f,
-      portalled: !0,
-      transitionConfig: c,
-      dismiss: N,
-      focusConfiguration: v ? !0 : { modal: !1, closeOnFocusOut: !1 },
-      children: /* @__PURE__ */ t(
-        k,
+      open: f,
+      onOpenChange: d,
+      portalled: l ? { root: l } : !0,
+      transitionConfig: p,
+      dismiss: _,
+      focusConfiguration: N ? !0 : { modal: !1, closeOnFocusOut: !1 },
+      children: /* @__PURE__ */ n(
+        J,
         {
-          panelClassName: l,
+          panelClassName: e,
           resolvedPosition: o,
-          showDivider: n,
-          dividerColor: s,
-          floatingOffset: r,
-          overlayDividerClassName: P,
-          isBlocking: v,
-          resizeConfig: d,
-          skipMountAnimation: u,
-          ...g,
-          role: e === "alert" ? "alertdialog" : "dialog",
-          "aria-modal": v || void 0,
-          children: p
+          showDivider: u,
+          dividerColor: v,
+          floatingOffset: c,
+          overlayDividerClassName: b,
+          isBlocking: N,
+          resizeConfig: x,
+          sizeStyle: C,
+          skipMountAnimation: y,
+          container: l,
+          ...I,
+          role: t === "alert" ? "alertdialog" : "dialog",
+          "aria-modal": N || void 0,
+          children: m
         }
       )
     }
   ) });
 };
 export {
-  Q as OverlayPanel
+  so as OverlayPanel
 };

package/lib/wip/Panel/Panel.ResizeHandle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),n=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const l=require("../../../chunks/panel.module.CVyUzyCZ.js"),{baseClassNamePrefix:i}=n.getBEMClassNames("panel"),e=r.forwardRef((t,s)=>a.jsx("div",{ref:s,className:l.styles[`${i}__resize-handle`],"aria-hidden":!0,tabIndex:-1}));e.displayName="PanelResizeHandle";exports.PanelResizeHandle=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),n=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const l=require("../../../chunks/panel.module.BVmRxZHo.js"),{baseClassNamePrefix:i}=n.getBEMClassNames("panel"),e=r.forwardRef((t,s)=>a.jsx("div",{ref:s,className:l.styles[`${i}__resize-handle`],"aria-hidden":!0,tabIndex:-1}));e.displayName="PanelResizeHandle";exports.PanelResizeHandle=e;

package/lib/wip/Panel/Panel.ResizeHandle.es.js

@@ -2,7 +2,7 @@ import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { g as r } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { s as o } from "../../../chunks/panel.module.BblnuBjO.js";
+import { s as o } from "../../../chunks/panel.module.CnHWv4EZ.js";
 const { baseClassNamePrefix: i } = r("panel"), m = s((t, e) => /* @__PURE__ */ a(
   "div",
   {

package/lib/wip/Panel/Panel.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),z=require("clsx"),g=require("react"),W=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const G=require("./Header/Panel.Header.cjs.js"),U=require("./Panel.Body.cjs.js"),Q=require("./Footer/Panel.Footer.cjs.js"),u=require("./Panel.helpers.cjs.js"),X=require("./Panel.Inline.cjs.js"),Y=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.CVyUzyCZ.js"),Z=165,k=100,ee=(t,d)=>{if(!t||d==="full")return;const f=d==="bottom",i=typeof t=="object"?t:{},r=i.minSize??(f?k:Z),o=i.maxSize??1/0,P=i.storageKey??"";return{minSize:r,maxSize:o,storageKey:P}},{baseClassNamePrefix:s}=W.getBEMClassNames("panel"),_=({children:t,className:d,padding:f="md",onOpenChange:i,open:r,size:o="md",dismissible:P=!0,closeButtonAriaLabel:v="Close panel",kind:n="inline",position:y,divider:R=!0,dividerColor:N,isAnimated:O=!0,onBeforeClose:B,modalType:a,offset:b,resizable:D,id:w,...p})=>{const l=u.getResolvedPanelPosition(y),c=ee(D,l),H=!!c;if(process.env.NODE_ENV!=="production"){c&&!c.storageKey&&console.warn("Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."),a==="alert"&&P&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');const{closeOnOutsidePress:V}=p;V&&a!=="nonModal"&&a!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.')}const C=a==="alert"?!1:P,T=o&&(l!=="bottom"||o==="full"),h=n==="overlay"&&b?u.resolveOffset(b):void 0,q=!!h,$=z(e.styles[s],e.styles[`${s}--${n}`],T&&e.styles[`${s}--size-${o}`],e.styles[`${s}--padding-${f}`],e.styles[`${s}--position-${l}`],q&&e.styles[`${s}--floating`],H&&e.styles[`${s}--resizable`],d),A=z(e.styles[`${s}__inline-wrapper`],e.styles[`${s}__inline-wrapper--size-${o}`]),{requestClose:I,handleOverlayOpenChange:j}=u.usePanelClose(B,i),M=g.useMemo(()=>({kind:n,dismissible:C,closeButtonAriaLabel:v,position:y,requestClose:I}),[n,C,v,y,I]),{showDivider:F,dividerBefore:K,dividerInner:J,dividerAfter:L}=u.getPanelDividerState(R&&!q,l),S=g.useMemo(()=>({duration:O?u.PANEL_TRANSITION_DURATION_MS:0}),[O]),m=g.useRef(void 0),E=m.current!==void 0&&m.current!==n&&r===!0;return m.current=n,n==="inline"?x.jsx(X.InlinePanel,{contextValue:M,panelClassName:$,inlineWrapperClassName:A,resolvedPosition:l,dividerBefore:K,dividerInner:J,dividerAfter:L,dividerColor:N,open:r,transitionConfig:S,resizeConfig:c,skipMountAnimation:E,id:w,...p,children:t}):x.jsx(Y.OverlayPanel,{contextValue:M,panelClassName:$,resolvedPosition:l,showDivider:F,dividerColor:N,modalType:a,floatingOffset:h,open:r,onOpenChange:j,transitionConfig:S,resizeConfig:c,skipMountAnimation:E,id:w,...p,children:t})};_.displayName="Panel";_.Header=G.Header;_.Body=U.Body;_.Footer=Q.Footer;exports.Panel=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),T=require("clsx"),j=require("react"),ne=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const A=require("../../../utils/hooks/usePrevious.cjs.js"),oe=require("./Header/Panel.Header.cjs.js"),ie=require("./Panel.Body.cjs.js"),te=require("./Footer/Panel.Footer.cjs.js"),r=require("./Panel.helpers.cjs.js"),le=require("./Panel.Inline.cjs.js"),re=require("./Panel.Overlay.cjs.js"),n=require("../../../chunks/panel.module.BVmRxZHo.js"),ae=165,ce=100,ue=(e,f)=>{if(!e)return;const _=f==="bottom",a=typeof e=="object"?e:{},t=a.minSize??(_?ce:ae),y=a.maxSize??1/0,d=a.storageKey??"";return{minSize:t,maxSize:y,storageKey:d}},{baseClassNamePrefix:o,variable:ve}=ne.getBEMClassNames("panel");function de(e){return r.isPresetSize(e)?{overlaySizeClass:n.styles[`${o}--size-${e}`],inlineSizeClass:n.styles[`${o}__inline-wrapper--size-${e}`],sizeStyle:void 0}:e!==void 0?{overlaySizeClass:void 0,inlineSizeClass:void 0,sizeStyle:{[ve("size")]:e}}:{overlaySizeClass:void 0,inlineSizeClass:void 0,sizeStyle:void 0}}const v=({children:e,className:f,padding:_="md",onOpenChange:a,open:t,size:y,dismissible:d=!0,closeButtonAriaLabel:m="Close panel",kind:s="inline",position:P,divider:F=!0,dividerColor:S,isAnimated:C=!0,onBeforeClose:K,modalType:c,offset:w,resizable:L,id:z,...b})=>{const l=r.getResolvedPanelPosition(P),u=ue(L,l),V=!!u,{container:h,triggerRef:W,...N}=b,i=s==="overlay"?h:void 0;if(process.env.NODE_ENV!=="production"){u&&!u.storageKey&&console.warn("Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."),c==="alert"&&d&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');const{closeOnOutsidePress:se}=b;if(se&&c!=="nonModal"&&c!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'),h&&s==="inline"&&console.warn('Panel: `container` has no effect when `kind="inline"`.'),i)try{if(typeof getComputedStyle=="function"){const p=getComputedStyle(i);p.position==="static"&&console.warn("Panel: container element should have `position: relative` (or another non-static value) for proper scoping.");const g=l==="bottom"?p.overflowY:p.overflowX;(g==="visible"||g==="auto"||g==="scroll")&&console.warn("Panel: container element should use `overflow: hidden` (or `clip`) so the slide-in/out transform does not trigger a transient scrollbar.")}}catch{}}const O=c==="alert"?!1:d,{overlaySizeClass:G,inlineSizeClass:U,sizeStyle:q}=de(y),$=s==="overlay"&&w?r.resolveOffset(w):void 0,I=!!$,M=T(n.styles[o],n.styles[`${o}--${s}`],s==="overlay"&&G,n.styles[`${o}--padding-${_}`],n.styles[`${o}--position-${l}`],I&&n.styles[`${o}--floating`],V&&n.styles[`${o}--resizable`],s==="overlay"&&i&&n.styles[`${o}--contained`],f),X=T(n.styles[`${o}__inline-wrapper`],U),{requestClose:x,handleOverlayOpenChange:Y}=r.usePanelClose(K,a),E=j.useMemo(()=>({kind:s,dismissible:O,closeButtonAriaLabel:m,position:P,requestClose:x}),[s,O,m,P,x]),{showDivider:J,dividerBefore:Q,dividerInner:Z,dividerAfter:k}=r.getPanelDividerState(F&&!I,l),B=j.useMemo(()=>({duration:C?r.PANEL_TRANSITION_DURATION_MS:0}),[C]),D=A.usePrevious(s),ee=A.usePrevious(i),H=D!==void 0&&D!==s&&t===!0||ee===null&&i!=null&&t===!0;return i===null?null:s==="inline"?R.jsx(le.InlinePanel,{contextValue:E,panelClassName:M,inlineWrapperClassName:X,resolvedPosition:l,dividerBefore:Q,dividerInner:Z,dividerAfter:k,dividerColor:S,open:t,transitionConfig:B,resizeConfig:u,skipMountAnimation:H,sizeStyle:q,id:z,...N,children:e}):R.jsx(re.OverlayPanel,{contextValue:E,panelClassName:M,resolvedPosition:l,showDivider:J,dividerColor:S,modalType:c,floatingOffset:$,open:t,onOpenChange:Y,transitionConfig:B,resizeConfig:u,skipMountAnimation:H,sizeStyle:q,id:z,...N,container:i,triggerRef:W,children:e})};v.displayName="Panel";v.Header=oe.Header;v.Body=ie.Body;v.Footer=te.Footer;exports.Panel=v;

package/lib/wip/Panel/Panel.d.ts

@@ -1,6 +1,6 @@
 import { PanelProps } from './Panel.types';
 export declare const Panel: {
-    ({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, dividerColor, isAnimated, onBeforeClose, modalType, offset, resizable, id, ...panelProps }: PanelProps): JSX.Element;
+    ({ children, className: _className, padding, onOpenChange, open, size, dismissible, closeButtonAriaLabel, kind, position, divider, dividerColor, isAnimated, onBeforeClose, modalType, offset, resizable, id, ...panelProps }: PanelProps): JSX.Element | null;
     displayName: string;
     Header: {
         ({ children, className: _className, divider, dividerColor, backgroundColor, ...props }: import('./Panel.types').PanelHeaderProps): import("react/jsx-runtime").JSX.Element;

package/lib/wip/Panel/Panel.es.js

@@ -1,124 +1,155 @@
-import { jsx as S } from "react/jsx-runtime";
-import z from "clsx";
-import { useMemo as x, useRef as W } from "react";
-import { g as q } from "../../../chunks/classNames.BTJmrO_L.js";
+import { jsx as A } from "react/jsx-runtime";
+import H from "clsx";
+import { useMemo as K } from "react";
+import { g as oe } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { Header as G } from "./Header/Panel.Header.es.js";
-import { Body as U } from "./Panel.Body.es.js";
-import { Footer as Q } from "./Footer/Panel.Footer.es.js";
-import { resolveOffset as X, usePanelClose as Y, getPanelDividerState as Z, PANEL_TRANSITION_DURATION_MS as k, getResolvedPanelPosition as ee } from "./Panel.helpers.es.js";
-import { InlinePanel as oe } from "./Panel.Inline.es.js";
-import { OverlayPanel as se } from "./Panel.Overlay.es.js";
-import { s as e } from "../../../chunks/panel.module.BblnuBjO.js";
-const ne = 165, te = 100, re = (n, m) => {
-  if (!n || m === "full") return;
-  const p = m === "bottom", i = typeof n == "object" ? n : {}, a = i.minSize ?? (p ? te : ne), t = i.maxSize ?? 1 / 0, f = i.storageKey ?? "";
-  return { minSize: a, maxSize: t, storageKey: f };
-}, { baseClassNamePrefix: o } = q("panel"), d = ({
-  children: n,
-  className: m,
+import { usePrevious as R } from "../../../utils/hooks/usePrevious.es.js";
+import { Header as ne } from "./Header/Panel.Header.es.js";
+import { Body as se } from "./Panel.Body.es.js";
+import { Footer as ie } from "./Footer/Panel.Footer.es.js";
+import { resolveOffset as te, usePanelClose as re, getPanelDividerState as ae, PANEL_TRANSITION_DURATION_MS as le, getResolvedPanelPosition as ce, isPresetSize as fe } from "./Panel.helpers.es.js";
+import { InlinePanel as me } from "./Panel.Inline.es.js";
+import { OverlayPanel as ve } from "./Panel.Overlay.es.js";
+import { s as n } from "../../../chunks/panel.module.CnHWv4EZ.js";
+const pe = 165, de = 100, ue = (e, v) => {
+  if (!e) return;
+  const p = v === "bottom", a = typeof e == "object" ? e : {}, t = a.minSize ?? (p ? de : pe), d = a.maxSize ?? 1 / 0, f = a.storageKey ?? "";
+  return { minSize: t, maxSize: d, storageKey: f };
+}, { baseClassNamePrefix: s, variable: ye } = oe("panel");
+function ge(e) {
+  return fe(e) ? {
+    overlaySizeClass: n[`${s}--size-${e}`],
+    inlineSizeClass: n[`${s}__inline-wrapper--size-${e}`],
+    sizeStyle: void 0
+  } : e !== void 0 ? {
+    overlaySizeClass: void 0,
+    inlineSizeClass: void 0,
+    sizeStyle: { [ye("size")]: e }
+  } : { overlaySizeClass: void 0, inlineSizeClass: void 0, sizeStyle: void 0 };
+}
+const m = ({
+  children: e,
+  className: v,
   padding: p = "md",
-  onOpenChange: i,
-  open: a,
-  size: t = "md",
+  onOpenChange: a,
+  open: t,
+  size: d,
   dismissible: f = !0,
-  closeButtonAriaLabel: N = "Close panel",
-  kind: s = "inline",
+  closeButtonAriaLabel: P = "Close panel",
+  kind: o = "inline",
   position: u,
-  divider: D = !0,
-  dividerColor: P,
-  isAnimated: O = !0,
-  onBeforeClose: A,
+  divider: F = !0,
+  dividerColor: S,
+  isAnimated: C = !0,
+  onBeforeClose: j,
   modalType: l,
-  offset: C,
-  resizable: B,
-  id: _,
-  ...g
+  offset: z,
+  resizable: L,
+  id: h,
+  ...N
 }) => {
-  const r = ee(u), c = re(B, r), R = !!c;
+  const r = ce(u), c = ue(L, r), V = !!c, { container: O, triggerRef: W, ...w } = N, i = o === "overlay" ? O : void 0;
   if (process.env.NODE_ENV !== "production") {
     c && !c.storageKey && console.warn(
       "Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."
     ), l === "alert" && f && console.warn(
       'Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'
     );
-    const { closeOnOutsidePress: V } = g;
-    V && l !== "nonModal" && l !== void 0 && console.warn(
+    const { closeOnOutsidePress: ee } = N;
+    if (ee && l !== "nonModal" && l !== void 0 && console.warn(
       'Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'
-    );
+    ), O && o === "inline" && console.warn('Panel: `container` has no effect when `kind="inline"`.'), i)
+      try {
+        if (typeof getComputedStyle == "function") {
+          const y = getComputedStyle(i);
+          y.position === "static" && console.warn(
+            "Panel: container element should have `position: relative` (or another non-static value) for proper scoping."
+          );
+          const g = r === "bottom" ? y.overflowY : y.overflowX;
+          (g === "visible" || g === "auto" || g === "scroll") && console.warn(
+            "Panel: container element should use `overflow: hidden` (or `clip`) so the slide-in/out transform does not trigger a transient scrollbar."
+          );
+        }
+      } catch {
+      }
   }
-  const y = l === "alert" ? !1 : f, T = t && (r !== "bottom" || t === "full"), $ = s === "overlay" && C ? X(C) : void 0, h = !!$, I = z(
-    e[o],
-    e[`${o}--${s}`],
-    T && e[`${o}--size-${t}`],
-    e[`${o}--padding-${p}`],
-    e[`${o}--position-${r}`],
-    h && e[`${o}--floating`],
-    R && e[`${o}--resizable`],
-    m
-  ), H = z(
-    e[`${o}__inline-wrapper`],
-    e[`${o}__inline-wrapper--size-${t}`]
-  ), { requestClose: b, handleOverlayOpenChange: K } = Y(
-    A,
-    i
-  ), w = x(
+  const _ = l === "alert" ? !1 : f, { overlaySizeClass: q, inlineSizeClass: G, sizeStyle: $ } = ge(d), b = o === "overlay" && z ? te(z) : void 0, I = !!b, E = H(
+    n[s],
+    n[`${s}--${o}`],
+    o === "overlay" && q,
+    n[`${s}--padding-${p}`],
+    n[`${s}--position-${r}`],
+    I && n[`${s}--floating`],
+    V && n[`${s}--resizable`],
+    o === "overlay" && i && n[`${s}--contained`],
+    v
+  ), U = H(
+    n[`${s}__inline-wrapper`],
+    G
+  ), { requestClose: M, handleOverlayOpenChange: X } = re(
+    j,
+    a
+  ), x = K(
     () => ({
-      kind: s,
-      dismissible: y,
-      closeButtonAriaLabel: N,
+      kind: o,
+      dismissible: _,
+      closeButtonAriaLabel: P,
       position: u,
-      requestClose: b
+      requestClose: M
     }),
-    [s, y, N, u, b]
-  ), { showDivider: F, dividerBefore: j, dividerInner: J, dividerAfter: L } = Z(D && !h, r), E = x(
-    () => ({ duration: O ? k : 0 }),
-    [O]
-  ), v = W(void 0), M = v.current !== void 0 && v.current !== s && a === !0;
-  return v.current = s, s === "inline" ? /* @__PURE__ */ S(
-    oe,
+    [o, _, P, u, M]
+  ), { showDivider: Y, dividerBefore: J, dividerInner: Q, dividerAfter: Z } = ae(F && !I, r), D = K(
+    () => ({ duration: C ? le : 0 }),
+    [C]
+  ), B = R(o), k = R(i), T = B !== void 0 && B !== o && t === !0 || k === null && i != null && t === !0;
+  return i === null ? null : o === "inline" ? /* @__PURE__ */ A(
+    me,
     {
-      contextValue: w,
-      panelClassName: I,
-      inlineWrapperClassName: H,
+      contextValue: x,
+      panelClassName: E,
+      inlineWrapperClassName: U,
       resolvedPosition: r,
-      dividerBefore: j,
-      dividerInner: J,
-      dividerAfter: L,
-      dividerColor: P,
-      open: a,
-      transitionConfig: E,
+      dividerBefore: J,
+      dividerInner: Q,
+      dividerAfter: Z,
+      dividerColor: S,
+      open: t,
+      transitionConfig: D,
       resizeConfig: c,
-      skipMountAnimation: M,
-      id: _,
-      ...g,
-      children: n
+      skipMountAnimation: T,
+      sizeStyle: $,
+      id: h,
+      ...w,
+      children: e
     }
-  ) : /* @__PURE__ */ S(
-    se,
+  ) : /* @__PURE__ */ A(
+    ve,
     {
-      contextValue: w,
-      panelClassName: I,
+      contextValue: x,
+      panelClassName: E,
       resolvedPosition: r,
-      showDivider: F,
-      dividerColor: P,
+      showDivider: Y,
+      dividerColor: S,
       modalType: l,
-      floatingOffset: $,
-      open: a,
-      onOpenChange: K,
-      transitionConfig: E,
+      floatingOffset: b,
+      open: t,
+      onOpenChange: X,
+      transitionConfig: D,
       resizeConfig: c,
-      skipMountAnimation: M,
-      id: _,
-      ...g,
-      children: n
+      skipMountAnimation: T,
+      sizeStyle: $,
+      id: h,
+      ...w,
+      container: i,
+      triggerRef: W,
+      children: e
     }
   );
 };
-d.displayName = "Panel";
-d.Header = G;
-d.Body = U;
-d.Footer = Q;
+m.displayName = "Panel";
+m.Header = ne;
+m.Body = se;
+m.Footer = ie;
 export {
-  d as Panel
+  m as Panel
 };

package/lib/wip/Panel/Panel.helpers.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=400;function P(e){return e===!0?{x:"1rem",y:"1rem"}:typeof e=="string"?{x:e,y:e}:{x:e.x,y:e.y}}const f="01",a=e=>e||"end",v=(e,t)=>{const r=e&&t!=="full";return{showDivider:r,dividerBefore:r&&t!=="start"&&t!=="bottom",dividerInner:r&&t==="bottom",dividerAfter:r&&t==="start"}},D=(e,t)=>{if(e!=="isModal")return e==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!0,outsidePress:t??!1}},_=e=>e==="escape-key"?"escapeKey":e==="outside-press"?"outsidePress":"programmatic",y=(e,t)=>{const r=u.useCallback(i=>{if(!e){t==null||t(!1);return}const s=e(i);s instanceof Promise?s.then(l=>{l&&(t==null||t(!1))}).catch(()=>{}):s&&(t==null||t(!1))},[e,t]),c=u.useCallback((i,s,l)=>{i?t==null||t(!0):r(_(l))},[t,r]);return{requestClose:r,handleOverlayOpenChange:c}};exports.DEFAULT_PANEL_DIVIDER_COLOR=f;exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDismissConfig=D;exports.getPanelDividerState=v;exports.getResolvedPanelPosition=a;exports.resolveOffset=P;exports.usePanelClose=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),o=e=>e==="sm"||e==="md"||e==="lg",a=400;function P(e){return e===!0?{x:"1rem",y:"1rem"}:typeof e=="string"?{x:e,y:e}:{x:e.x,y:e.y}}const d="01",f=e=>e||"end",D=(e,s)=>({showDivider:e,dividerBefore:e&&s!=="start"&&s!=="bottom",dividerInner:e&&s==="bottom",dividerAfter:e&&s==="start"}),_=(e,s)=>{if(e!=="isModal")return e==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!0,outsidePress:s??!1}},v=e=>e==="escape-key"?"escapeKey":e==="outside-press"?"outsidePress":"programmatic",y=(e,s)=>{const i=c.useCallback(l=>{if(!e){s==null||s(!1);return}const r=e(l);r instanceof Promise?r.then(t=>{t&&(s==null||s(!1))}).catch(t=>{process.env.NODE_ENV!=="production"&&console.warn("Panel: `onBeforeClose` rejected; close cancelled (panel stays open). If this was not intentional, handle the error inside `onBeforeClose`.",t)}):r&&(s==null||s(!1))},[e,s]),u=c.useCallback((l,r,t)=>{l?s==null||s(!0):i(v(t))},[s,i]);return{requestClose:i,handleOverlayOpenChange:u}};exports.DEFAULT_PANEL_DIVIDER_COLOR=d;exports.PANEL_TRANSITION_DURATION_MS=a;exports.getPanelDismissConfig=_;exports.getPanelDividerState=D;exports.getResolvedPanelPosition=f;exports.isPresetSize=o;exports.resolveOffset=P;exports.usePanelClose=y;

package/lib/wip/Panel/Panel.helpers.d.ts

@@ -1,5 +1,6 @@
 import { OpenChangeReason } from '@floating-ui/react';
-import { OverlayPanelProps, PanelCloseReason, PanelDividerColor, PanelModalType, PanelPosition, PanelProps, ResolvedPanelOffset } from './Panel.types';
+import { OverlayPanelProps, PanelCloseReason, PanelDividerColor, PanelModalType, PanelPosition, PanelProps, PanelSize, ResolvedPanelOffset } from './Panel.types';
+export declare const isPresetSize: (s: PanelSize | undefined) => s is "sm" | "md" | "lg";
 export declare const PANEL_TRANSITION_DURATION_MS = 400;
 export declare function resolveOffset(offset: Exclude<OverlayPanelProps['offset'], false | undefined>): ResolvedPanelOffset;
 export declare const DEFAULT_PANEL_DIVIDER_COLOR: PanelDividerColor;