@viasat/beam-react 2.41.0 → 2.43.0

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

@@ -1,71 +1,81 @@
-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.ZWNk1hey.js";
+import { jsx as R } from "react/jsx-runtime";
+import F from "clsx";
+import { useMemo as V } from "react";
+import { g as re } from "../../../chunks/classNames.ZWNk1hey.js";
 import "../../../chunks/constants.Cruz2A1w.js";
-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) => {
+import { usePrevious as j } from "../../../utils/hooks/usePrevious.es.js";
+import { Header as ae } from "./Header/Panel.Header.es.js";
+import { Body as le } from "./Panel.Body.es.js";
+import { Footer as ce } from "./Footer/Panel.Footer.es.js";
+import { resolveOffset as fe, usePanelClose as me, getPanelDividerState as ve, PANEL_TRANSITION_DURATION_MS as de, getResolvedPanelPosition as pe, isPresetWidth as ue } from "./Panel.helpers.es.js";
+import { InlinePanel as ye } from "./Panel.Inline.es.js";
+import { OverlayPanel as he } from "./Panel.Overlay.es.js";
+import { s as t } from "../../../chunks/panel.module.CgFBtvbR.js";
+const ge = 165, Pe = 100, we = (e, i) => {
   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
+  const r = i === "bottom", c = typeof e == "object" ? e : {}, l = c.minSize ?? (r ? Pe : ge), p = c.maxSize ?? 1 / 0, u = c.storageKey ?? "";
+  return { minSize: l, maxSize: p, storageKey: u };
+}, { baseClassNamePrefix: n, variable: L } = re("panel");
+function Ce(e, i) {
+  const r = {
+    overlayWidthClass: void 0,
+    inlineWidthClass: void 0,
+    widthStyle: void 0
+  };
+  return i === "bottom" ? r : ue(e) ? {
+    overlayWidthClass: t[`${n}--width-${e}`],
+    inlineWidthClass: t[`${n}__inline-wrapper--width-${e}`],
+    widthStyle: void 0
   } : e !== void 0 ? {
-    overlaySizeClass: void 0,
-    inlineSizeClass: void 0,
-    sizeStyle: { [ye("size")]: e }
-  } : { overlaySizeClass: void 0, inlineSizeClass: void 0, sizeStyle: void 0 };
+    ...r,
+    widthStyle: { [L("width")]: e }
+  } : r;
 }
-const m = ({
+function Ne(e, i) {
+  if (!(i !== "bottom" || e === void 0))
+    return { [L("height")]: e };
+}
+const d = ({
   children: e,
-  className: v,
-  padding: p = "md",
-  onOpenChange: a,
-  open: t,
-  size: d,
-  dismissible: f = !0,
-  closeButtonAriaLabel: P = "Close panel",
-  kind: o = "inline",
-  position: u,
-  divider: F = !0,
-  dividerColor: S,
-  isAnimated: C = !0,
-  onBeforeClose: j,
-  modalType: l,
-  offset: z,
-  resizable: L,
-  id: h,
-  ...N
+  className: i,
+  padding: r = "md",
+  onOpenChange: c,
+  open: l,
+  width: p,
+  height: u,
+  dismissible: P = !0,
+  closeButtonAriaLabel: w = "Close panel",
+  kind: o = "overlay",
+  position: y,
+  divider: q = !0,
+  dividerColor: v,
+  backgroundColor: C,
+  isAnimated: N = !0,
+  onBeforeClose: G,
+  modalType: f,
+  offset: O,
+  resizable: U,
+  id: S,
+  ..._
 }) => {
-  const r = ce(u), c = ue(L, r), V = !!c, { container: O, triggerRef: W, ...w } = N, i = o === "overlay" ? O : void 0;
+  const s = pe(y), m = we(U, s), X = !!m, { container: $, triggerRef: Y, ...b } = _, a = o === "overlay" ? $ : void 0;
   if (process.env.NODE_ENV !== "production") {
-    c && !c.storageKey && console.warn(
+    m && !m.storageKey && console.warn(
       "Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."
-    ), l === "alert" && f && console.warn(
+    ), f === "alert" && P && console.warn(
       'Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'
     );
-    const { closeOnOutsidePress: ee } = N;
-    if (ee && l !== "nonModal" && l !== void 0 && console.warn(
+    const { closeOnOutsidePress: ie } = _;
+    if (ie && f !== "nonModal" && f !== 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)
+    ), $ && o === "inline" && console.warn('Panel: `container` has no effect when `kind="inline"`.'), a)
       try {
         if (typeof getComputedStyle == "function") {
-          const y = getComputedStyle(i);
-          y.position === "static" && console.warn(
+          const h = getComputedStyle(a);
+          h.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;
+          const g = s === "bottom" ? h.overflowY : h.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."
           );
@@ -73,83 +83,88 @@ const m = ({
       } catch {
       }
   }
-  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(
+  const I = f === "alert" ? !1 : P, { overlayWidthClass: J, inlineWidthClass: Q, widthStyle: W } = Ce(
+    p,
+    s
+  ), E = Ne(u, s), M = W || E ? { ...W, ...E } : void 0, x = o === "overlay" && O ? fe(O) : void 0, z = !!x, D = F(
+    t[n],
+    t[`${n}--${o}`],
+    o === "overlay" && J,
+    t[`${n}--padding-${r}`],
+    t[`${n}--position-${s}`],
+    z && t[`${n}--floating`],
+    X && t[`${n}--resizable`],
+    o === "overlay" && a && t[`${n}--contained`],
+    i
+  ), Z = F(
+    t[`${n}__inline-wrapper`],
+    Q
+  ), { requestClose: B, handleOverlayOpenChange: k } = me(
+    G,
+    c
+  ), H = V(
     () => ({
       kind: o,
-      dismissible: _,
-      closeButtonAriaLabel: P,
-      position: u,
-      requestClose: M
+      dismissible: I,
+      closeButtonAriaLabel: w,
+      position: y,
+      requestClose: B,
+      backgroundColor: C,
+      dividerColor: v
     }),
-    [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,
+    [o, I, w, y, B, C, v]
+  ), { showDivider: ee, dividerBefore: oe, dividerInner: te, dividerAfter: ne } = ve(q && !z, s), T = V(
+    () => ({ duration: N ? de : 0 }),
+    [N]
+  ), A = j(o), se = j(a), K = A !== void 0 && A !== o && l === !0 || se === null && a != null && l === !0;
+  return a === null ? null : o === "inline" ? /* @__PURE__ */ R(
+    ye,
     {
-      contextValue: x,
-      panelClassName: E,
-      inlineWrapperClassName: U,
-      resolvedPosition: r,
-      dividerBefore: J,
-      dividerInner: Q,
-      dividerAfter: Z,
-      dividerColor: S,
-      open: t,
-      transitionConfig: D,
-      resizeConfig: c,
-      skipMountAnimation: T,
-      sizeStyle: $,
-      id: h,
-      ...w,
+      contextValue: H,
+      panelClassName: D,
+      inlineWrapperClassName: Z,
+      resolvedPosition: s,
+      dividerBefore: oe,
+      dividerInner: te,
+      dividerAfter: ne,
+      dividerColor: v,
+      open: l,
+      transitionConfig: T,
+      resizeConfig: m,
+      skipMountAnimation: K,
+      cssVarStyle: M,
+      id: S,
+      ...b,
       children: e
     }
-  ) : /* @__PURE__ */ A(
-    ve,
+  ) : /* @__PURE__ */ R(
+    he,
     {
-      contextValue: x,
-      panelClassName: E,
-      resolvedPosition: r,
-      showDivider: Y,
-      dividerColor: S,
-      modalType: l,
-      floatingOffset: b,
-      open: t,
-      onOpenChange: X,
-      transitionConfig: D,
-      resizeConfig: c,
-      skipMountAnimation: T,
-      sizeStyle: $,
-      id: h,
-      ...w,
-      container: i,
-      triggerRef: W,
+      contextValue: H,
+      panelClassName: D,
+      resolvedPosition: s,
+      showDivider: ee,
+      dividerColor: v,
+      modalType: f,
+      floatingOffset: x,
+      open: l,
+      onOpenChange: k,
+      transitionConfig: T,
+      resizeConfig: m,
+      skipMountAnimation: K,
+      cssVarStyle: M,
+      id: S,
+      ...b,
+      container: a,
+      triggerRef: Y,
       children: e
     }
   );
 };
-m.displayName = "Panel";
-m.Header = ne;
-m.Body = se;
-m.Footer = ie;
+d.displayName = "Panel";
+d.Header = ae;
+d.Body = le;
+d.Footer = ce;
 export {
-  m as Panel
+  d as Panel
 };

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

@@ -1 +1 @@
-"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;
+"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||"start",D=(e,t)=>({showDivider:e,dividerBefore:e&&t!=="start"&&t!=="bottom",dividerInner:e&&t==="bottom",dividerAfter:e&&t==="start"}),_=(e,t)=>{if(e!=="isModal")return e==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!0,outsidePress:t??!0}},v=e=>e==="escape-key"?"escapeKey":e==="outside-press"?"outsidePress":"programmatic",y=(e,t)=>{const i=c.useCallback(l=>{if(!e){t==null||t(!1);return}const r=e(l);r instanceof Promise?r.then(s=>{s&&(t==null||t(!1))}).catch(s=>{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`.",s)}):r&&(t==null||t(!1))},[e,t]),u=c.useCallback((l,r,s)=>{l?t==null||t(!0):i(v(s))},[t,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.isPresetWidth=o;exports.resolveOffset=P;exports.usePanelClose=y;

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

@@ -1,6 +1,6 @@
 import { OpenChangeReason } from '@floating-ui/react';
-import { OverlayPanelProps, PanelCloseReason, PanelDividerColor, PanelModalType, PanelPosition, PanelProps, PanelSize, ResolvedPanelOffset } from './Panel.types';
-export declare const isPresetSize: (s: PanelSize | undefined) => s is "sm" | "md" | "lg";
+import { OverlayPanelProps, PanelCloseReason, PanelDividerColor, PanelModalType, PanelPosition, PanelProps, PanelWidth, ResolvedPanelOffset } from './Panel.types';
+export declare const isPresetWidth: (w: PanelWidth | undefined) => w 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;
@@ -15,7 +15,7 @@ export declare const getPanelDividerState: (divider: boolean, position?: PanelPo
  * Returns the floating-ui `dismiss` config for an overlay panel.
  *
  * - `isModal`           — `undefined` (floating-ui defaults: ESC + backdrop click both close)
- * - `nonModal` / omitted — ESC closes; outside-press controlled by `closeOnOutsidePress`
+ * - `nonModal` / omitted — ESC closes; outside-press closes unless `closeOnOutsidePress={false}`
  * - `alert`             — ESC and outside-press both suppressed
  */
 export declare const getPanelDismissConfig: (modalType: PanelModalType | undefined, closeOnOutsidePress?: boolean) => {

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

@@ -3,39 +3,39 @@ const o = (t) => t === "sm" || t === "md" || t === "lg", a = 400;
 function P(t) {
   return t === !0 ? { x: "1rem", y: "1rem" } : typeof t == "string" ? { x: t, y: t } : { x: t.x, y: t.y };
 }
-const m = "01", y = (t) => t || "end", v = (t, e) => ({
+const m = "01", y = (t) => t || "start", v = (t, r) => ({
   showDivider: t,
-  dividerBefore: t && e !== "start" && e !== "bottom",
+  dividerBefore: t && r !== "start" && r !== "bottom",
   // For 'bottom' panels the divider must sit inside the scrollable wrapper (above the content),
   // not outside it — so it is rendered via dividerInner rather than dividerBefore.
-  dividerInner: t && e === "bottom",
-  dividerAfter: t && e === "start"
-}), D = (t, e) => {
+  dividerInner: t && r === "bottom",
+  dividerAfter: t && r === "start"
+}), D = (t, r) => {
   if (t !== "isModal")
-    return t === "alert" ? { escapeKey: !1, outsidePress: !1 } : { escapeKey: !0, outsidePress: e ?? !1 };
-}, f = (t) => t === "escape-key" ? "escapeKey" : t === "outside-press" ? "outsidePress" : "programmatic", _ = (t, e) => {
+    return t === "alert" ? { escapeKey: !1, outsidePress: !1 } : { escapeKey: !0, outsidePress: r ?? !0 };
+}, d = (t) => t === "escape-key" ? "escapeKey" : t === "outside-press" ? "outsidePress" : "programmatic", _ = (t, r) => {
   const i = c(
     (l) => {
       if (!t) {
-        e == null || e(!1);
+        r == null || r(!1);
         return;
       }
-      const s = t(l);
-      s instanceof Promise ? s.then((r) => {
-        r && (e == null || e(!1));
-      }).catch((r) => {
+      const e = t(l);
+      e instanceof Promise ? e.then((s) => {
+        s && (r == null || r(!1));
+      }).catch((s) => {
         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`.",
-          r
+          s
         );
-      }) : s && (e == null || e(!1));
+      }) : e && (r == null || r(!1));
     },
-    [t, e]
+    [t, r]
   ), u = c(
-    (l, s, r) => {
-      l ? e == null || e(!0) : i(f(r));
+    (l, e, s) => {
+      l ? r == null || r(!0) : i(d(s));
     },
-    [e, i]
+    [r, i]
   );
   return { requestClose: i, handleOverlayOpenChange: u };
 };
@@ -45,7 +45,7 @@ export {
   D as getPanelDismissConfig,
   v as getPanelDividerState,
   y as getResolvedPanelPosition,
-  o as isPresetSize,
+  o as isPresetWidth,
   P as resolveOffset,
   _ as usePanelClose
 };