@viasat/beam-react 2.29.1 → 2.36.0

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

@@ -1,116 +1,155 @@
-import { jsx as E } from "react/jsx-runtime";
-import S from "clsx";
-import { useMemo as z } from "react";
-import { g as V } 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 W } from "./Header/Panel.Header.es.js";
-import { Body as q } from "./Panel.Body.es.js";
-import { Footer as G } from "./Footer/Panel.Footer.es.js";
-import { resolveOffset as U, usePanelClose as J, getPanelDividerState as Q, PANEL_TRANSITION_DURATION_MS as X, getResolvedPanelPosition as Y } from "./Panel.helpers.es.js";
-import { InlinePanel as Z } from "./Panel.Inline.es.js";
-import { OverlayPanel as k } from "./Panel.Overlay.es.js";
-import { s as e } from "../../../chunks/panel.module.BblnuBjO.js";
-const ee = 165, oe = 100, se = (s, m) => {
-  if (!s || m === "full") return;
-  const p = m === "bottom", r = typeof s == "object" ? s : {}, c = r.minSize ?? (p ? oe : ee), n = r.maxSize ?? 1 / 0, f = r.storageKey ?? "";
-  return { minSize: c, maxSize: n, storageKey: f };
-}, { baseClassNamePrefix: o } = V("panel"), d = ({
-  children: s,
-  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: r,
-  open: c,
-  size: n = "md",
+  onOpenChange: a,
+  open: t,
+  size: d,
   dismissible: f = !0,
-  closeButtonAriaLabel: N = "Close panel",
-  kind: i = "inline",
-  position: g,
-  divider: M = !0,
-  dividerColor: v,
-  isAnimated: P = !0,
-  onBeforeClose: x,
-  modalType: a,
-  offset: O,
-  resizable: D,
-  id: _,
-  ...u
+  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
 }) => {
-  const t = Y(g), l = se(D, t), B = !!l;
+  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") {
-    l && !l.storageKey && console.warn("Panel: provide a `storageKey` in the `resizable` config to persist panel size across sessions."), a === "alert" && f && console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');
-    const { closeOnOutsidePress: L } = u;
-    L && a !== "nonModal" && a !== void 0 && console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.');
+    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: 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 = a === "alert" ? !1 : f, T = n && (t !== "bottom" || n === "full"), $ = i === "overlay" && O ? U(O) : void 0, C = !!$, I = S(
-    e[o],
-    e[`${o}--${i}`],
-    T && e[`${o}--size-${n}`],
-    e[`${o}--padding-${p}`],
-    e[`${o}--position-${t}`],
-    C && e[`${o}--floating`],
-    B && e[`${o}--resizable`],
-    m
-  ), A = S(
-    e[`${o}__inline-wrapper`],
-    e[`${o}__inline-wrapper--size-${n}`]
-  ), { requestClose: h, handleOverlayOpenChange: H } = J(
-    x,
-    r
-  ), b = z(
+  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: i,
-      dismissible: y,
-      closeButtonAriaLabel: N,
-      position: g,
-      requestClose: h
+      kind: o,
+      dismissible: _,
+      closeButtonAriaLabel: P,
+      position: u,
+      requestClose: M
     }),
-    [i, y, N, g, h]
-  ), { showDivider: K, dividerBefore: R, dividerInner: F, dividerAfter: j } = Q(M && !C, t), w = z(
-    () => ({ duration: P ? X : 0 }),
-    [P]
-  );
-  return i === "inline" ? /* @__PURE__ */ E(
-    Z,
+    [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: b,
-      panelClassName: I,
-      inlineWrapperClassName: A,
-      resolvedPosition: t,
-      dividerBefore: R,
-      dividerInner: F,
-      dividerAfter: j,
-      dividerColor: v,
-      open: c,
-      transitionConfig: w,
-      resizeConfig: l,
-      id: _,
-      ...u,
-      children: s
+      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,
+      children: e
     }
-  ) : /* @__PURE__ */ E(
-    k,
+  ) : /* @__PURE__ */ A(
+    ve,
     {
-      contextValue: b,
-      panelClassName: I,
-      resolvedPosition: t,
-      showDivider: K,
-      dividerColor: v,
-      modalType: a,
-      floatingOffset: $,
-      open: c,
-      onOpenChange: H,
-      transitionConfig: w,
-      resizeConfig: l,
-      id: _,
-      ...u,
-      children: s
+      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,
+      children: e
     }
   );
 };
-d.displayName = "Panel";
-d.Header = W;
-d.Body = q;
-d.Footer = G;
+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;

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

@@ -1,49 +1,51 @@
-import { useCallback as l } from "react";
-const P = 400;
-function v(t) {
+import { useCallback as c } from "react";
+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", D = (t, r) => {
-  const s = t && r !== "full";
-  return {
-    showDivider: s,
-    dividerBefore: s && 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: s && r === "bottom",
-    dividerAfter: s && r === "start"
-  };
-}, _ = (t, r) => {
+const m = "01", y = (t) => t || "end", v = (t, e) => ({
+  showDivider: t,
+  dividerBefore: t && e !== "start" && e !== "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) => {
   if (t !== "isModal")
-    return t === "alert" ? { escapeKey: !1, outsidePress: !1 } : { escapeKey: !0, outsidePress: r ?? !1 };
-}, d = (t) => t === "escape-key" ? "escapeKey" : t === "outside-press" ? "outsidePress" : "programmatic", A = (t, r) => {
-  const s = l(
-    (i) => {
+    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) => {
+  const i = c(
+    (l) => {
       if (!t) {
-        r == null || r(!1);
+        e == null || e(!1);
         return;
       }
-      const e = t(i);
-      e instanceof Promise ? e.then((u) => {
-        u && (r == null || r(!1));
-      }).catch(() => {
-      }) : e && (r == null || r(!1));
+      const s = t(l);
+      s instanceof Promise ? s.then((r) => {
+        r && (e == null || e(!1));
+      }).catch((r) => {
+        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 && (e == null || e(!1));
     },
-    [t, r]
-  ), c = l(
-    (i, e, u) => {
-      i ? r == null || r(!0) : s(d(u));
+    [t, e]
+  ), u = c(
+    (l, s, r) => {
+      l ? e == null || e(!0) : i(f(r));
     },
-    [r, s]
+    [e, i]
   );
-  return { requestClose: s, handleOverlayOpenChange: c };
+  return { requestClose: i, handleOverlayOpenChange: u };
 };
 export {
   m as DEFAULT_PANEL_DIVIDER_COLOR,
-  P as PANEL_TRANSITION_DURATION_MS,
-  _ as getPanelDismissConfig,
-  D as getPanelDividerState,
+  a as PANEL_TRANSITION_DURATION_MS,
+  D as getPanelDismissConfig,
+  v as getPanelDividerState,
   y as getResolvedPanelPosition,
-  v as resolveOffset,
-  A as usePanelClose
+  o as isPresetSize,
+  P as resolveOffset,
+  _ as usePanelClose
 };

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

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, RefObject } from 'react';
 import { PanelDividerColor, PanelDividerColors } from '@viasat/beam-shared/components/panel';
 export type { PanelDividerColor };
 export { PanelDividerColors };
@@ -7,9 +7,9 @@ export type ResolvedPanelOffset = {
     x: string;
     y: string;
 };
-export type PanelPosition = 'start' | 'end' | 'bottom' | 'full';
+export type PanelPosition = 'start' | 'end' | 'bottom';
 export type PanelModalType = 'nonModal' | 'isModal' | 'alert';
-export type PanelSize = 'sm' | 'md' | 'lg' | 'full';
+export type PanelSize = 'sm' | 'md' | 'lg' | (string & {});
 export type PanelPadding = 'sm' | 'md';
 /**
  * Configuration for resizable panels.
@@ -60,9 +60,20 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
     onOpenChange?: (open: boolean) => void;
     /**
      * Specify the size of the Panel.
-     * When `position="bottom"`, only `size="full"` has an effect (enables full-viewport height).
-     * All other values are ignored for bottom panels — width is always 100%.
-     * @default 'md'
+     *
+     * **Named presets** (`'sm'`, `'md'`, `'lg'`) map to design tokens via the
+     * `.bm-panel--size-{sm|md|lg}` modifier class, which sets `--bm-comp-panel-size`.
+     *
+     * **Arbitrary strings** (e.g. `"480px"`, `"100dvh"`) are applied directly as
+     * `--bm-comp-panel-size` via inline style, giving full CSS flexibility.
+     *
+     * For `position="bottom"`, the variable drives `height` instead of `width`
+     * (axis-awareness is in SCSS). Width is always `100%` for bottom panels.
+     *
+     * When omitted: non-bottom panels fall back to the `md` token; bottom panels
+     * fall back to `auto` (content-driven height, capped at `90dvh`). Prefer
+     * omitting `size` over `size="auto"` for bottom panels — explicitly passing
+     * `"auto"` sets `max-height: auto`, removing the `90dvh` viewport cap.
      */
     size?: PanelSize;
     /**
@@ -83,7 +94,10 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      */
     closeButtonAriaLabel?: string;
     /**
-     * Whether to animate the panel on open/close
+     * Whether to animate the panel on open/close.
+     * When `false`, floating-ui's transition timing collapses to zero, which clips
+     * the close animation. CSS `transition-duration` values in the stylesheet are
+     * unaffected — use `prefers-reduced-motion` in SCSS for motion-sensitive contexts.
      * @default true
      */
     isAnimated?: boolean;
@@ -98,15 +112,15 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      */
     dividerColor?: PanelDividerColor;
     /**
-     * Specify the position of the Panel
-     * 'start' | 'end' | 'bottom' | 'full'
+     * Specify the position of the Panel.
+     * `'start'` | `'end'` | `'bottom'`
      * @default 'end'
      */
     position?: PanelPosition;
     /**
      * Enables user-resizing via a drag handle at the panel edge.
      * Pass `true` to use default min/max constraints, or an object to set custom
-     * values in pixels. Has no effect when `position="full"`.
+     * values in pixels.
      * Provide a `storageKey` in the config object to persist the panel's last-used size across sessions.
      * @default false
      */
@@ -186,6 +200,46 @@ export interface OverlayPanelProps extends BasePanelProps {
         x: string;
         y: string;
     };
+    /**
+     * Portal target for the overlay. When set, the panel renders inside this
+     * element using `position: absolute` instead of `position: fixed`. The
+     * container must:
+     * - establish a containing block (e.g. `position: relative`)
+     * - have an appropriate `z-index`
+     * - use `overflow: hidden` (or `clip`) so the panel's slide-in/out
+     *   transform doesn't trigger a transient scrollbar on the container.
+     *
+     * Pass the resolved element (or `null` until it exists) — the consumer owns
+     * resolution. Use a callback ref or state so the value is reactive; when it
+     * flips from `null` to the element, the panel re-renders into the container.
+     * A plain `useRef` whose `.current` is mutated will not trigger that update.
+     *
+     * @example
+     * ```tsx
+     * const [container, setContainer] = useState<HTMLElement | null>(null);
+     * return (
+     *   <div ref={setContainer} style={{ position: 'relative', overflow: 'hidden' }}>
+     *     <Panel kind="overlay" container={container} ... />
+     *   </div>
+     * );
+     * ```
+     *
+     * Has no effect on `kind="inline"`.
+     */
+    container?: HTMLElement | null;
+    /**
+     * The element that opens the panel; clicks on it are excluded from outside-press
+     * dismissal so it can toggle the panel without the close immediately re-firing.
+     * Focus returns to the previously-focused element (typically this trigger) on close.
+     * No effect on `kind="inline"`.
+     *
+     * Note: the exclusion is implemented as a raw `outsidePress` predicate rather than
+     * a FloatingUI reference registration. This avoids `autoUpdate` re-renders that
+     * interfere with the slide-in CSS transition, but means FloatingUI's nested-floating
+     * tree-scoping (`__outsidePressBubbles`) is bypassed for this panel. Avoid using
+     * `triggerRef` when the panel is nested inside another FloatingUI floating element.
+     */
+    triggerRef?: RefObject<HTMLElement | null>;
 }
 export type PanelProps = InlinePanelProps | OverlayPanelProps;
 /**

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),k=require("../../../utils/hooks/useElementResize.cjs.js"),y=require("../../../utils/hooks/useLocalStorage.cjs.js"),R=({resizeConfig:u,position:l,floatingRef:c,requireMount:s=!1})=>{const n=!!u,{minSize:z=0,maxSize:b=0,storageKey:o=""}=u??{},i=t.useRef(null),[r,_]=t.useState(!1),m=t.useCallback(e=>{i.current=e,s&&_(!!e)},[s]),[S,d]=y.useLocalStorage(o||"__panel_no_key__","0",n&&!!o),a=n&&Number(S)>0?Number(S):0,f=t.useCallback(e=>{o&&d(e.toString())},[o,d]);return k.useElementResize(s?n&&r:n,c,i,z,b,a,l==="bottom"?"y":"x",l==="end",f),t.useEffect(()=>{if(!s||!r||!a||!c.current)return;const e=l==="bottom"?"blockSize":"inlineSize";c.current.style[e]=`${a}px`},[r]),{handleRef:m}};exports.usePanelResize=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),R=require("../../../utils/hooks/useElementResize.cjs.js"),g=require("../../../utils/hooks/useLocalStorage.cjs.js"),x=({resizeConfig:i,position:s,floatingRef:o,requireMount:n=!1,container:r})=>{const l=!!i,{minSize:f=0,maxSize:S=0,storageKey:c=""}=i??{},m=t.useCallback(()=>{const e=r;return e?s==="bottom"?e.clientHeight*.9:e.clientWidth*.5:1/0},[r,s]),_=r&&S===1/0?m:S,d=t.useRef(null),[a,y]=t.useState(!1),k=t.useCallback(e=>{d.current=e,n&&y(!!e)},[n]),[b,z]=g.useLocalStorage(c||"__panel_no_key__","0",l&&!!c),u=l&&Number(b)>0?Number(b):0,h=t.useCallback(e=>{c&&z(e.toString())},[c,z]);return R.useElementResize(n?l&&a:l,o,d,f,_,u,s==="bottom"?"y":"x",s==="end",h),t.useEffect(()=>{if(!n||!a||!u||!o.current)return;const e=s==="bottom"?"blockSize":"inlineSize";o.current.style[e]=`${u}px`},[a]),{handleRef:k}};exports.usePanelResize=x;

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

@@ -10,8 +10,10 @@ type UsePanelResizeOptions = {
      * ref and re-applies the stored size each time the panel opens.
      */
     requireMount?: boolean;
+    /** When set, max resize bounds are derived from this element instead of the viewport. */
+    container?: HTMLElement;
 };
-export declare const usePanelResize: ({ resizeConfig, position, floatingRef, requireMount, }: UsePanelResizeOptions) => {
+export declare const usePanelResize: ({ resizeConfig, position, floatingRef, requireMount, container, }: UsePanelResizeOptions) => {
     handleRef: (el: HTMLDivElement | null) => void;
 };
 export {};

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

@@ -1,42 +1,46 @@
-import { useRef as _, useState as x, useCallback as u, useEffect as y } from "react";
-import { useElementResize as k } from "../../../utils/hooks/useElementResize.es.js";
-import { useLocalStorage as E } from "../../../utils/hooks/useLocalStorage.es.js";
+import { useCallback as a, useRef as p, useState as k, useEffect as E } from "react";
+import { useElementResize as H } from "../../../utils/hooks/useElementResize.es.js";
+import { useLocalStorage as R } from "../../../utils/hooks/useLocalStorage.es.js";
 const N = ({
-  resizeConfig: l,
-  position: o,
-  floatingRef: r,
-  requireMount: t = !1
+  resizeConfig: m,
+  position: t,
+  floatingRef: o,
+  requireMount: n = !1,
+  container: c
 }) => {
-  const n = !!l, { minSize: S = 0, maxSize: z = 0, storageKey: s = "" } = l ?? {}, m = _(null), [c, f] = x(!1), b = u(
+  const s = !!m, { minSize: z = 0, maxSize: f = 0, storageKey: r = "" } = m ?? {}, b = a(() => {
+    const e = c;
+    return e ? t === "bottom" ? e.clientHeight * 0.9 : e.clientWidth * 0.5 : 1 / 0;
+  }, [c, t]), x = c && f === 1 / 0 ? b : f, u = p(null), [l, y] = k(!1), _ = a(
     (e) => {
-      m.current = e, t && f(!!e);
+      u.current = e, n && y(!!e);
     },
-    [t]
-  ), [i, d] = E(
-    s || "__panel_no_key__",
+    [n]
+  ), [d, S] = R(
+    r || "__panel_no_key__",
     "0",
-    n && !!s
-  ), a = n && Number(i) > 0 ? Number(i) : 0, p = u(
+    s && !!r
+  ), i = s && Number(d) > 0 ? Number(d) : 0, h = a(
     (e) => {
-      s && d(e.toString());
+      r && S(e.toString());
     },
-    [s, d]
+    [r, S]
   );
-  return k(
-    t ? n && c : n,
-    r,
-    m,
-    S,
+  return H(
+    n ? s && l : s,
+    o,
+    u,
     z,
-    a,
-    o === "bottom" ? "y" : "x",
-    o === "end",
-    p
-  ), y(() => {
-    if (!t || !c || !a || !r.current) return;
-    const e = o === "bottom" ? "blockSize" : "inlineSize";
-    r.current.style[e] = `${a}px`;
-  }, [c]), { handleRef: b };
+    x,
+    i,
+    t === "bottom" ? "y" : "x",
+    t === "end",
+    h
+  ), E(() => {
+    if (!n || !l || !i || !o.current) return;
+    const e = t === "bottom" ? "blockSize" : "inlineSize";
+    o.current.style[e] = `${i}px`;
+  }, [l]), { handleRef: _ };
 };
 export {
   N as usePanelResize

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.29.1",
+  "version": "2.36.0",
   "description": "React component library for the Beam design system",
   "license": "MIT",
   "author": "Viasat",
@@ -59,11 +59,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@viasat/beam-fonts": "2.29.1",
-    "@viasat/beam-shared": "2.29.1",
-    "@viasat/beam-styles": "2.29.1",
-    "@viasat/beam-tokens": "2.29.1",
-    "@viasat/beam-icons": "2.29.1",
+    "@viasat/beam-fonts": "2.36.0",
+    "@viasat/beam-shared": "2.36.0",
+    "@viasat/beam-styles": "2.36.0",
+    "@viasat/beam-tokens": "2.36.0",
+    "@viasat/beam-icons": "2.36.0",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",

package/utils/hooks/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),d=require("../../chunks/constants.hwjHOsvT.js"),p=require("../../chunks/helpers.COm6C5Gf.js"),a=require("../../chunks/CSSLookup.DESAWWRT.js"),w=require("./useId.cjs.js"),f=require("./useInteractiveProps.cjs.js");function g(e,t=window.getComputedStyle(e)){return parseInt(t.getPropertyValue("-webkit-line-clamp"),10)>=1&&t.getPropertyValue("display")==="-webkit-box"&&t.getPropertyValue("overflow")==="hidden"}function h(e,t=window.getComputedStyle(e)){return t.getPropertyValue("text-overflow")==="ellipsis"&&t.getPropertyValue("white-space")==="nowrap"&&t.getPropertyValue("overflow")==="hidden"&&e.scrollWidth>e.clientWidth}function v(e){return e.scrollWidth>e.clientWidth||e.scrollHeight>e.clientHeight}function S(e){if(!e)return!1;if(v(e))return!0;const t=window.getComputedStyle(e);return g(e,t)||h(e,t)}const b=e=>{if(!e)return!1;const t=e.cloneNode(!0);t.style.position="absolute",t.style.whiteSpace="nowrap",t.style.width="auto",t.style.height="auto",t.style.visibility="hidden",document.body.appendChild(t);const n=t.offsetWidth>e.offsetWidth;return document.body.removeChild(t),n},l=(e,t=d.FPS_120,n=[])=>{const r=s.useRef(null);return s.useLayoutEffect(()=>{const{current:i}=r;if(!i)return;e();const u=p.debounce(()=>{e()},t),c=new ResizeObserver(u);return c.observe(i),()=>{c.disconnect(),u.cancel()}},[r,e,t,n]),{ref:r}},m=()=>{const[e,t]=s.useState(!1),n=()=>{r.current&&t(S(r.current))},{ref:r}=l(n);return{ref:r,isOverFlowing:e}},y=e=>{const[t,n]=s.useState(!1),r=()=>{i.current&&n(b(i.current))},{ref:i}=l(r,200);return{ref:i,isTextWrapping:t}},C=e=>{const[t,n]=s.useState(()=>a.CSSManager.findVar(e)??"");return s.useEffect(()=>{const r=i=>{n(i)};return a.CSSManager.findVar(e,r),()=>{a.CSSManager.unsubscribe(e,r)}},[e]),t};function W(e){const[t,n]=s.useState(!1);return s.useLayoutEffect(()=>{if(typeof window>"u")return;const r=o=>o?getComputedStyle(o).direction:"ltr",i=()=>{const o=e.current;return o?r(o)==="rtl"||!!o.closest('[dir="rtl"]')||r(document.documentElement)==="rtl":!1};n(i());const u=new MutationObserver(()=>n(i()));u.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class"],subtree:!0});const c=requestAnimationFrame(function o(){n(i()),requestAnimationFrame(o)});return()=>{u.disconnect(),cancelAnimationFrame(c)}},[e]),t}const I=()=>{const[e,t]=s.useState(!1);return s.useEffect(()=>{if(typeof window>"u")return;const n=()=>{const r="ontouchstart"in window||navigator.maxTouchPoints>0,i=window.innerHeight>window.innerWidth,u=i?window.innerWidth:window.innerHeight,c=i?window.innerHeight:window.innerWidth,o=u<1024||c<768;t(r&&o)};return n(),window.addEventListener("resize",n,{passive:!0}),window.addEventListener("orientationchange",n,{passive:!0}),()=>{window.removeEventListener("resize",n),window.removeEventListener("orientationchange",n)}},[]),e};exports.useId=w.useId;exports.useInteractiveProps=f.useInteractiveProps;exports.useCSSLookup=C;exports.useIsOverFlowing=m;exports.useIsTextWrapping=y;exports.useMobileDetection=I;exports.useRTLDirection=W;exports.useResizeObserver=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),d=require("../../chunks/constants.hwjHOsvT.js"),p=require("../../chunks/helpers.COm6C5Gf.js"),a=require("../../chunks/CSSLookup.DESAWWRT.js"),w=require("./useId.cjs.js"),f=require("./usePrevious.cjs.js"),g=require("./useInteractiveProps.cjs.js");function h(e,t=window.getComputedStyle(e)){return parseInt(t.getPropertyValue("-webkit-line-clamp"),10)>=1&&t.getPropertyValue("display")==="-webkit-box"&&t.getPropertyValue("overflow")==="hidden"}function v(e,t=window.getComputedStyle(e)){return t.getPropertyValue("text-overflow")==="ellipsis"&&t.getPropertyValue("white-space")==="nowrap"&&t.getPropertyValue("overflow")==="hidden"&&e.scrollWidth>e.clientWidth}function S(e){return e.scrollWidth>e.clientWidth||e.scrollHeight>e.clientHeight}function b(e){if(!e)return!1;if(S(e))return!0;const t=window.getComputedStyle(e);return h(e,t)||v(e,t)}const m=e=>{if(!e)return!1;const t=e.cloneNode(!0);t.style.position="absolute",t.style.whiteSpace="nowrap",t.style.width="auto",t.style.height="auto",t.style.visibility="hidden",document.body.appendChild(t);const n=t.offsetWidth>e.offsetWidth;return document.body.removeChild(t),n},l=(e,t=d.FPS_120,n=[])=>{const r=s.useRef(null);return s.useLayoutEffect(()=>{const{current:i}=r;if(!i)return;e();const u=p.debounce(()=>{e()},t),c=new ResizeObserver(u);return c.observe(i),()=>{c.disconnect(),u.cancel()}},[r,e,t,n]),{ref:r}},y=()=>{const[e,t]=s.useState(!1),n=()=>{r.current&&t(b(r.current))},{ref:r}=l(n);return{ref:r,isOverFlowing:e}},C=e=>{const[t,n]=s.useState(!1),r=()=>{i.current&&n(m(i.current))},{ref:i}=l(r,200);return{ref:i,isTextWrapping:t}},W=e=>{const[t,n]=s.useState(()=>a.CSSManager.findVar(e)??"");return s.useEffect(()=>{const r=i=>{n(i)};return a.CSSManager.findVar(e,r),()=>{a.CSSManager.unsubscribe(e,r)}},[e]),t};function P(e){const[t,n]=s.useState(!1);return s.useLayoutEffect(()=>{if(typeof window>"u")return;const r=o=>o?getComputedStyle(o).direction:"ltr",i=()=>{const o=e.current;return o?r(o)==="rtl"||!!o.closest('[dir="rtl"]')||r(document.documentElement)==="rtl":!1};n(i());const u=new MutationObserver(()=>n(i()));u.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class"],subtree:!0});const c=requestAnimationFrame(function o(){n(i()),requestAnimationFrame(o)});return()=>{u.disconnect(),cancelAnimationFrame(c)}},[e]),t}const I=()=>{const[e,t]=s.useState(!1);return s.useEffect(()=>{if(typeof window>"u")return;const n=()=>{const r="ontouchstart"in window||navigator.maxTouchPoints>0,i=window.innerHeight>window.innerWidth,u=i?window.innerWidth:window.innerHeight,c=i?window.innerHeight:window.innerWidth,o=u<1024||c<768;t(r&&o)};return n(),window.addEventListener("resize",n,{passive:!0}),window.addEventListener("orientationchange",n,{passive:!0}),()=>{window.removeEventListener("resize",n),window.removeEventListener("orientationchange",n)}},[]),e};exports.useId=w.useId;exports.usePrevious=f.usePrevious;exports.useInteractiveProps=g.useInteractiveProps;exports.useCSSLookup=W;exports.useIsOverFlowing=y;exports.useIsTextWrapping=C;exports.useMobileDetection=I;exports.useRTLDirection=P;exports.useResizeObserver=l;