@viasat/beam-react 2.26.1 → 2.28.0

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

@@ -1,101 +1,116 @@
-import { jsx as $ } from "react/jsx-runtime";
-import g from "clsx";
-import { useMemo as h } from "react";
-import { g as R } from "../../../chunks/classNames.BTJmrO_L.js";
+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 "../../../chunks/constants.CKKGf1-i.js";
-import { Header as V } from "./Panel.Header.es.js";
-import { Body as F } from "./Panel.Body.es.js";
-import { Footer as H } from "./Panel.Footer.es.js";
-import { usePanelClose as T, getPanelDividerState as j, PANEL_TRANSITION_DURATION_MS as q, getResolvedPanelPosition as U } from "./Panel.helpers.es.js";
-import { InlinePanel as W } from "./Panel.Inline.es.js";
-import { OverlayPanel as G } from "./Panel.Overlay.es.js";
-import { s as e } from "../../../chunks/panel.module.DJLJpnm_.js";
-const { baseClassNamePrefix: o } = R("panel"), l = ({
-  children: m,
-  className: _,
-  padding: w = "md",
-  onOpenChange: y,
-  open: p,
-  size: r,
-  dismissible: d = !0,
-  closeButtonAriaLabel: f = "Close panel",
-  kind: t = "inline",
-  position: a,
-  divider: D = !0,
-  dividerColor: c,
-  isAnimated: u = !0,
-  onBeforeClose: E,
-  modalType: s,
-  ...i
+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,
+  padding: p = "md",
+  onOpenChange: r,
+  open: c,
+  size: n = "md",
+  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
 }) => {
-  process.env.NODE_ENV !== "production" && s === "alert" && d && console.warn(
-    'Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'
-  ), process.env.NODE_ENV !== "production" && i.closeOnOutsidePress && s !== "nonModal" && s !== void 0 && console.warn(
-    'Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'
-  );
-  const N = s === "alert" ? !1 : d, n = U(a), x = r && (n !== "bottom" || r === "full"), P = g(
+  const t = Y(g), l = se(D, t), B = !!l;
+  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"`.');
+  }
+  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}--${t}`],
-    x && e[`${o}--size-${r}`],
-    e[`${o}--padding-${w}`],
-    e[`${o}--position-${n}`],
-    _
-  ), I = g(
+    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`],
-    r === "full" && e[`${o}__inline-wrapper--full`]
-  ), { requestClose: v, handleOverlayOpenChange: M } = T(
-    E,
-    y
-  ), O = h(
+    e[`${o}__inline-wrapper--size-${n}`]
+  ), { requestClose: h, handleOverlayOpenChange: H } = J(
+    x,
+    r
+  ), b = z(
     () => ({
-      kind: t,
-      dismissible: N,
-      closeButtonAriaLabel: f,
-      position: a,
-      requestClose: v
+      kind: i,
+      dismissible: y,
+      closeButtonAriaLabel: N,
+      position: g,
+      requestClose: h
     }),
-    [t, N, f, a, v]
-  ), { showDivider: b, dividerBefore: S, dividerInner: A, dividerAfter: B } = j(D, n), C = h(
-    () => ({ duration: u ? q : 0 }),
-    [u]
+    [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 t === "inline" ? /* @__PURE__ */ $(
-    W,
+  return i === "inline" ? /* @__PURE__ */ E(
+    Z,
     {
-      contextValue: O,
-      panelClassName: P,
-      inlineWrapperClassName: I,
-      resolvedPosition: n,
-      dividerBefore: S,
-      dividerInner: A,
-      dividerAfter: B,
-      dividerColor: c,
-      open: p,
-      transitionConfig: C,
-      ...i,
-      children: m
+      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
     }
-  ) : /* @__PURE__ */ $(
-    G,
+  ) : /* @__PURE__ */ E(
+    k,
     {
-      contextValue: O,
-      panelClassName: P,
-      resolvedPosition: n,
-      showDivider: b,
-      dividerColor: c,
-      modalType: s,
-      open: p,
-      onOpenChange: M,
-      transitionConfig: C,
-      ...i,
-      children: m
+      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
     }
   );
 };
-l.displayName = "Panel";
-l.Header = V;
-l.Body = F;
-l.Footer = H;
+d.displayName = "Panel";
+d.Header = W;
+d.Body = q;
+d.Footer = G;
 export {
-  l 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"),d=400,f="01",P=t=>t||"end",a=(t,s)=>{const e=t&&s!=="full";return{showDivider:e,dividerBefore:e&&s!=="start"&&s!=="bottom",dividerInner:e&&s==="bottom",dividerAfter:e&&s==="start"}},D=(t,s)=>{if(t!=="isModal")return t==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!1,outsidePress:s??!1}},_=t=>t==="escape-key"?"escapeKey":t==="outside-press"?"outsidePress":"programmatic",v=(t,s)=>{const e=c.useCallback(i=>{if(!t){s==null||s(!1);return}const r=t(i);r instanceof Promise?r.then(l=>{l&&(s==null||s(!1))}).catch(()=>{}):r&&(s==null||s(!1))},[t,s]),u=c.useCallback((i,r,l)=>{i?s==null||s(!0):e(_(l))},[s,e]);return{requestClose:e,handleOverlayOpenChange:u}};exports.DEFAULT_PANEL_DIVIDER_COLOR=f;exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDismissConfig=D;exports.getPanelDividerState=a;exports.getResolvedPanelPosition=P;exports.usePanelClose=v;
+"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;

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

@@ -1,6 +1,7 @@
 import { OpenChangeReason } from '@floating-ui/react';
-import { PanelCloseReason, PanelDividerColor, PanelModalType, PanelPosition, PanelProps } from './Panel.types';
+import { OverlayPanelProps, PanelCloseReason, PanelDividerColor, PanelModalType, PanelPosition, PanelProps, ResolvedPanelOffset } from './Panel.types';
 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;
 export declare const getResolvedPanelPosition: (position?: PanelPosition) => PanelPosition;
 export declare const getPanelDividerState: (divider: boolean, position?: PanelPosition) => {
@@ -13,7 +14,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 suppressed; outside-press controlled by `closeOnOutsidePress`
+ * - `nonModal` / omitted — ESC closes; outside-press controlled by `closeOnOutsidePress`
  * - `alert`             — ESC and outside-press both suppressed
  */
 export declare const getPanelDismissConfig: (modalType: PanelModalType | undefined, closeOnOutsidePress?: boolean) => {

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

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

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

@@ -3,10 +3,26 @@ import { PanelDividerColor, PanelDividerColors } from '@viasat/beam-shared/compo
 export type { PanelDividerColor };
 export { PanelDividerColors };
 export type PanelKind = 'inline' | 'overlay';
+export type ResolvedPanelOffset = {
+    x: string;
+    y: string;
+};
 export type PanelPosition = 'start' | 'end' | 'bottom' | 'full';
 export type PanelModalType = 'nonModal' | 'isModal' | 'alert';
-export type PanelSize = 'sm' | 'md' | 'lg' | 'full' | 'custom';
+export type PanelSize = 'sm' | 'md' | 'lg' | 'full';
 export type PanelPadding = 'sm' | 'md';
+/**
+ * Configuration for resizable panels.
+ * Pass `true` to use defaults, or an object for custom constraints.
+ */
+export type PanelResizable = boolean | {
+    /** Minimum panel size in px. Default: 165 for start/end, 100 for bottom. */
+    minSize?: number;
+    /** Maximum panel size in px. Default: 50% viewport width for start/end, 90% viewport height for bottom. */
+    maxSize?: number;
+    /** localStorage key for persisting the panel's last-used size across sessions. */
+    storageKey?: string;
+};
 /**
  * The reason a Panel close was requested via user interaction.
  *
@@ -87,6 +103,14 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      * @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"`.
+     * Provide a `storageKey` in the config object to persist the panel's last-used size across sessions.
+     * @default false
+     */
+    resizable?: PanelResizable;
     /**
      * Called before the Panel closes due to a user interaction. Return `false` (or
      * `Promise<false>`) to cancel the close — for example, when the panel contains
@@ -122,6 +146,7 @@ export interface InlinePanelProps extends BasePanelProps {
      */
     kind?: 'inline';
     modalType?: never;
+    offset?: never;
 }
 export interface OverlayPanelProps extends BasePanelProps {
     /**
@@ -130,8 +155,12 @@ export interface OverlayPanelProps extends BasePanelProps {
     kind: 'overlay';
     /**
      * Specify the modal type (overlay only).
-     * When set to `'alert'`, the close button is always hidden regardless of the
-     * `dismissible` prop, and ESC / backdrop clicks are suppressed.
+     *
+     * - `'nonModal'` (default) — page stays interactive; ESC closes the panel;
+     *   outside clicks only close when `closeOnOutsidePress` is set.
+     * - `'isModal'` — backdrop overlay, focus trapped; ESC and backdrop click close the panel.
+     * - `'alert'` — close button hidden, ESC and outside clicks are suppressed.
+     *
      * @default 'nonModal'
      */
     modalType?: PanelModalType;
@@ -141,6 +170,34 @@ export interface OverlayPanelProps extends BasePanelProps {
      * @default false
      */
     closeOnOutsidePress?: boolean;
+    /**
+     * Activates the floating/offset visual style for overlay panels.
+     * The panel is inset from the viewport edge, gains border radius,
+     * and hides the outer divider.
+     * Pass `true` to use the default offset (`1rem`), or a CSS length
+     * string (for example, `"2rem"`) for a custom offset on all sides. Pass a
+     * `{ x, y }` object (for example, `{ x: "2rem", y: "0.5rem" }`) for
+     * independent horizontal and vertical offsets.
+     * Setting this prop automatically suppresses the outer divider regardless
+     * of the `divider` prop value.
+     * @default false
+     */
+    offset?: boolean | string | {
+        x: string;
+        y: string;
+    };
 }
 export type PanelProps = InlinePanelProps | OverlayPanelProps;
-export type { PanelHeaderProps } from './Panel.Header';
+/**
+ * Resolved resize configuration passed to internal Panel components.
+ * Presence signals resizing is enabled; absence signals it is disabled.
+ */
+export type PanelResizeConfig = {
+    /** @default 165 for start/end, 100 for bottom */
+    minSize: number;
+    /** @default 50dvw for start/end, 90dvh for bottom */
+    maxSize: number;
+    /** localStorage key for size persistence */
+    storageKey: string;
+};
+export type { PanelHeaderProps } from './Header/Panel.Header';

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

@@ -0,0 +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;

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

@@ -0,0 +1,17 @@
+import { PanelPosition, PanelResizeConfig } from './Panel.types';
+type UsePanelResizeOptions = {
+    resizeConfig?: PanelResizeConfig;
+    position: PanelPosition;
+    floatingRef: React.RefObject<HTMLElement | null>;
+    /**
+     * Overlay panels start closed: the floating element and resize handle don't mount until open.
+     * useElementResize's listener-attach effect would otherwise run with a null handle ref and never
+     * re-run (ref object identity is stable). When true, this hook tracks handle mount via callback
+     * ref and re-applies the stored size each time the panel opens.
+     */
+    requireMount?: boolean;
+};
+export declare const usePanelResize: ({ resizeConfig, position, floatingRef, requireMount, }: UsePanelResizeOptions) => {
+    handleRef: (el: HTMLDivElement | null) => void;
+};
+export {};

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

@@ -0,0 +1,43 @@
+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";
+const N = ({
+  resizeConfig: l,
+  position: o,
+  floatingRef: r,
+  requireMount: t = !1
+}) => {
+  const n = !!l, { minSize: S = 0, maxSize: z = 0, storageKey: s = "" } = l ?? {}, m = _(null), [c, f] = x(!1), b = u(
+    (e) => {
+      m.current = e, t && f(!!e);
+    },
+    [t]
+  ), [i, d] = E(
+    s || "__panel_no_key__",
+    "0",
+    n && !!s
+  ), a = n && Number(i) > 0 ? Number(i) : 0, p = u(
+    (e) => {
+      s && d(e.toString());
+    },
+    [s, d]
+  );
+  return k(
+    t ? n && c : n,
+    r,
+    m,
+    S,
+    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 };
+};
+export {
+  N as usePanelResize
+};

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

@@ -1,12 +1,12 @@
 export { Panel } from './Panel';
 export type { PanelProps, InlinePanelProps, OverlayPanelProps, PanelKind, PanelPosition, PanelModalType, PanelSize, PanelPadding, PanelCloseReason, } from './Panel.types';
-export type { PanelHeaderProps } from './Panel.Header';
-export type { PanelHeaderRowProps } from './Panel.Header.Row';
-export type { PanelHeaderContentBeforeProps } from './Panel.Header.ContentBefore';
-export type { PanelHeaderHeadingProps } from './Panel.Header.Heading';
-export type { PanelHeaderDescriptionProps } from './Panel.Header.Description';
-export type { PanelHeaderContentAfterProps } from './Panel.Header.ContentAfter';
-export type { PanelHeaderSubheaderProps } from './Panel.Header.Subheader';
+export type { PanelHeaderProps } from './Header/Panel.Header';
+export type { PanelHeaderRowProps } from './Header/Panel.Header.Row';
+export type { PanelHeaderContentBeforeProps } from './Header/Panel.Header.ContentBefore';
+export type { PanelHeaderHeadingProps } from './Header/Panel.Header.Heading';
+export type { PanelHeaderDescriptionProps } from './Header/Panel.Header.Description';
+export type { PanelHeaderContentAfterProps } from './Header/Panel.Header.ContentAfter';
+export type { PanelHeaderSubheaderProps } from './Header/Panel.Header.Subheader';
 export type { PanelBodyProps } from './Panel.Body';
-export type { PanelFooterProps } from './Panel.Footer';
-export type { PanelFooterActionsProps } from './Panel.Footer.Actions';
+export type { PanelFooterProps } from './Footer/Panel.Footer';
+export type { PanelFooterActionsProps } from './Footer/Panel.Footer.Actions';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.26.1",
+  "version": "2.28.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.26.1",
-    "@viasat/beam-shared": "2.26.1",
-    "@viasat/beam-styles": "2.26.1",
-    "@viasat/beam-tokens": "2.26.1",
-    "@viasat/beam-icons": "2.26.1",
+    "@viasat/beam-fonts": "2.28.0",
+    "@viasat/beam-shared": "2.28.0",
+    "@viasat/beam-styles": "2.28.0",
+    "@viasat/beam-tokens": "2.28.0",
+    "@viasat/beam-icons": "2.28.0",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",

package/utils/hooks/useElementResize.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),S=require("../../chunks/constants.hwjHOsvT.js"),X=require("../../chunks/helpers.COm6C5Gf.js"),q=(d,n,r,p=165,v=400,h=0)=>{const[C,y]=e.useState(h),i=e.useRef(0),a=e.useRef(!1),m=e.useCallback(t=>{if(!n.current)return;const L=t.clientX-i.current;i.current=t.clientX;const P=n.current.offsetWidth,c=a.current?P-L:P+L;c>=p&&c<=v&&(requestAnimationFrame(()=>{n.current&&(n.current.style.inlineSize=`${c}px`)}),y(c))},[n,p,v]),o=e.useMemo(()=>X.debounce(m,S.FPS_120),[m]),u=e.useCallback(t=>{r.current&&r.current.releasePointerCapture(t.pointerId),n.current&&(n.current.style.transition=""),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",u)},[o,n,r]),s=e.useCallback(t=>{t.preventDefault(),n.current&&(a.current=getComputedStyle(n.current).direction==="rtl",n.current.style.transition="none"),r.current&&r.current.setPointerCapture(t.pointerId),i.current=t.clientX,document.addEventListener("pointermove",o),document.addEventListener("pointerup",u)},[o,u,n,r]);return e.useEffect(()=>{if(!d||!r.current||!document)return;const t=r.current;return t&&t.addEventListener("pointerdown",s),()=>{t&&t.removeEventListener("pointerdown",s),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",u)}},[s,o,u,d,r]),C};exports.useElementResize=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),m=(g,n,o,P=165,k=400,i=0,e="x",W=!1,M)=>{const[$,Y]=r.useState(i),h=r.useRef(0),X=r.useRef(!1),L=r.useRef(i),s=r.useRef(null),p=r.useRef(null),w=r.useRef(M);w.current=M,r.useLayoutEffect(()=>{if(!i||!n.current||!g)return;const t=e==="y"?"blockSize":"inlineSize";n.current.style[t]=`${i}px`},[]);const C=r.useCallback(t=>{if(!n.current)return;const u=k===1/0?e==="y"?window.innerHeight*.9:window.innerWidth*.5:k;if(e==="y"){const c=t.clientY-h.current,f=n.current.offsetHeight-c;f>=P&&f<=u&&(h.current=t.clientY,L.current=f,Y(f),n.current.style.blockSize=`${f}px`)}else{const c=t.clientX-h.current,v=n.current.offsetWidth,y=X.current!==W?v-c:v+c;y>=P&&y<=u&&(h.current=t.clientX,L.current=y,Y(y),n.current.style.inlineSize=`${y}px`)}},[n,P,k,e,W]),d=r.useCallback(t=>{s.current=t,p.current===null&&(p.current=requestAnimationFrame(()=>{p.current=null,s.current&&(C(s.current),s.current=null)}))},[C]),l=r.useCallback(t=>{var u,c;(u=o.current)==null||u.releasePointerCapture(t.pointerId),document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",l),p.current!==null&&(cancelAnimationFrame(p.current),p.current=null),s.current&&(C(s.current),s.current=null),n.current&&(n.current.style.transition=""),(c=w.current)==null||c.call(w,L.current)},[C,d,n,o]),I=r.useCallback(t=>{var u,c,v;t.preventDefault(),n.current&&(X.current=e==="x"?getComputedStyle(n.current).direction==="rtl":!1,n.current.style.transition="none"),(u=o.current)==null||u.setPointerCapture(t.pointerId),h.current=e==="y"?t.clientY:t.clientX,L.current=e==="y"?((c=n.current)==null?void 0:c.offsetHeight)??i:((v=n.current)==null?void 0:v.offsetWidth)??i,document.addEventListener("pointermove",d),document.addEventListener("pointerup",l)},[d,l,n,o,e,i]);return r.useEffect(()=>{if(!g||!o.current)return;const t=o.current;return t.addEventListener("pointerdown",I),()=>{t.removeEventListener("pointerdown",I),document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",l)}},[I,d,l,g,o]),$};exports.useElementResize=m;

package/utils/hooks/useElementResize.d.ts

@@ -1 +1 @@
-export declare const useElementResize: (resizeEnabled: boolean, resizableElementRef: React.RefObject<HTMLElement>, resizeHandlerRef: React.RefObject<HTMLElement>, minWidth?: number, maxWidth?: number, defaultWidth?: number) => number;
+export declare const useElementResize: (resizeEnabled: boolean, resizableElementRef: React.RefObject<HTMLElement>, resizeHandlerRef: React.RefObject<HTMLElement>, minSize?: number, maxSize?: number, defaultSize?: number, axis?: "x" | "y", invertX?: boolean, onDragEnd?: (size: number) => void) => number;

package/utils/hooks/useElementResize.es.js

@@ -1,46 +1,52 @@
-import { useState as y, useRef as C, useCallback as s, useMemo as S, useEffect as f } from "react";
-import { a as M } from "../../chunks/constants.CKKGf1-i.js";
-import { d as W } from "../../chunks/helpers.CPNYYxrE.js";
-const g = (p, n, r, d = 165, v = 400, X = 0) => {
-  const [a, w] = y(X), c = C(0), m = C(!1), L = s(
+import { useState as A, useRef as v, useLayoutEffect as F, useCallback as C, useEffect as q } from "react";
+const U = (I, n, o, P = 165, W = 400, e = 0, c = "x", k = !1, M) => {
+  const [m, X] = A(e), y = v(0), $ = v(!1), w = v(e), i = v(null), s = v(null), g = v(M);
+  g.current = M, F(() => {
+    if (!e || !n.current || !I) return;
+    const t = c === "y" ? "blockSize" : "inlineSize";
+    n.current.style[t] = `${e}px`;
+  }, []);
+  const l = C(
     (t) => {
       if (!n.current) return;
-      const P = t.clientX - c.current;
-      c.current = t.clientX;
-      const h = n.current.offsetWidth, u = m.current ? h - P : h + P;
-      u >= d && u <= v && (requestAnimationFrame(() => {
-        n.current && (n.current.style.inlineSize = `${u}px`);
-      }), w(u));
+      const u = W === 1 / 0 ? c === "y" ? window.innerHeight * 0.9 : window.innerWidth * 0.5 : W;
+      if (c === "y") {
+        const r = t.clientY - y.current, h = n.current.offsetHeight - r;
+        h >= P && h <= u && (y.current = t.clientY, w.current = h, X(h), n.current.style.blockSize = `${h}px`);
+      } else {
+        const r = t.clientX - y.current, d = n.current.offsetWidth, L = $.current !== k ? d - r : d + r;
+        L >= P && L <= u && (y.current = t.clientX, w.current = L, X(L), n.current.style.inlineSize = `${L}px`);
+      }
     },
-    [n, d, v]
-  ), o = S(
-    () => W(L, M),
-    [L]
-  ), e = s(
+    [n, P, W, c, k]
+  ), p = C(
     (t) => {
-      r.current && r.current.releasePointerCapture(t.pointerId), n.current && (n.current.style.transition = ""), document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", e);
+      i.current = t, s.current === null && (s.current = requestAnimationFrame(() => {
+        s.current = null, i.current && (l(i.current), i.current = null);
+      }));
     },
-    [o, n, r]
-  ), i = s(
+    [l]
+  ), f = C(
     (t) => {
-      t.preventDefault(), n.current && (m.current = getComputedStyle(n.current).direction === "rtl", n.current.style.transition = "none"), r.current && r.current.setPointerCapture(t.pointerId), c.current = t.clientX, document.addEventListener("pointermove", o), document.addEventListener("pointerup", e);
+      var u, r;
+      (u = o.current) == null || u.releasePointerCapture(t.pointerId), document.removeEventListener("pointermove", p), document.removeEventListener("pointerup", f), s.current !== null && (cancelAnimationFrame(s.current), s.current = null), i.current && (l(i.current), i.current = null), n.current && (n.current.style.transition = ""), (r = g.current) == null || r.call(g, w.current);
     },
-    [o, e, n, r]
+    [l, p, n, o]
+  ), Y = C(
+    (t) => {
+      var u, r, d;
+      t.preventDefault(), n.current && ($.current = c === "x" ? getComputedStyle(n.current).direction === "rtl" : !1, n.current.style.transition = "none"), (u = o.current) == null || u.setPointerCapture(t.pointerId), y.current = c === "y" ? t.clientY : t.clientX, w.current = c === "y" ? ((r = n.current) == null ? void 0 : r.offsetHeight) ?? e : ((d = n.current) == null ? void 0 : d.offsetWidth) ?? e, document.addEventListener("pointermove", p), document.addEventListener("pointerup", f);
+    },
+    [p, f, n, o, c, e]
   );
-  return f(() => {
-    if (!p || !r.current || !document) return;
-    const t = r.current;
-    return t && t.addEventListener("pointerdown", i), () => {
-      t && t.removeEventListener("pointerdown", i), document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", e);
+  return q(() => {
+    if (!I || !o.current) return;
+    const t = o.current;
+    return t.addEventListener("pointerdown", Y), () => {
+      t.removeEventListener("pointerdown", Y), document.removeEventListener("pointermove", p), document.removeEventListener("pointerup", f);
     };
-  }, [
-    i,
-    o,
-    e,
-    p,
-    r
-  ]), a;
+  }, [Y, p, f, I, o]), m;
 };
 export {
-  g as useElementResize
+  U as useElementResize
 };