@viasat/beam-react 2.30.0 → 2.37.0

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/lib/wip/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Panel/Panel.cjs.js");exports.Panel=e.Panel;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateField/DateField.cjs.js"),i=require("./Panel/Panel.cjs.js");exports.DateField=e.DateField;exports.Panel=i.Panel;

package/lib/wip/index.d.ts

@@ -1 +1,2 @@
+export * from './DateField';
 export * from './Panel';

package/lib/wip/index.es.js

@@ -1,4 +1,6 @@
-import { Panel as r } from "./Panel/Panel.es.js";
+import { DateField as r } from "./DateField/DateField.es.js";
+import { Panel as a } from "./Panel/Panel.es.js";
 export {
-  r as Panel
+  r as DateField,
+  a as Panel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.30.0",
+  "version": "2.37.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.30.0",
-    "@viasat/beam-shared": "2.30.0",
-    "@viasat/beam-styles": "2.30.0",
-    "@viasat/beam-tokens": "2.30.0",
-    "@viasat/beam-icons": "2.30.0",
+    "@viasat/beam-fonts": "2.37.0",
+    "@viasat/beam-shared": "2.37.0",
+    "@viasat/beam-styles": "2.37.0",
+    "@viasat/beam-tokens": "2.37.0",
+    "@viasat/beam-icons": "2.37.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;

package/utils/hooks/index.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { VoidFunction } from '@viasat/beam-shared/utils/constants';
 import { debounce } from '@viasat/beam-shared/utils/helpers';
 export { useId } from './useId';
+export { usePrevious } from './usePrevious';
 export { useInteractiveProps, type UseInteractivePropsOptions, type InteractiveProps, type InteractiveElementType, } from './useInteractiveProps';
 type WaitFor = Parameters<typeof debounce>[1];
 /**

package/utils/hooks/index.es.js

@@ -1,9 +1,10 @@
-import { useState as u, useEffect as d, useRef as w, useLayoutEffect as l } from "react";
-import { a as f } from "../../chunks/constants.CKKGf1-i.js";
+import { useState as u, useEffect as d, useRef as f, useLayoutEffect as l } from "react";
+import { a as w } from "../../chunks/constants.CKKGf1-i.js";
 import { d as m } from "../../chunks/helpers.CPNYYxrE.js";
 import { C as a } from "../../chunks/CSSLookup.DOOy1rxJ.js";
 import { useId as V } from "./useId.es.js";
-import { useInteractiveProps as M } from "./useInteractiveProps.es.js";
+import { usePrevious as M } from "./usePrevious.es.js";
+import { useInteractiveProps as k } from "./useInteractiveProps.es.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";
 }
@@ -25,8 +26,8 @@ const y = (e) => {
   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;
-}, p = (e, t = f, n = []) => {
-  const r = w(null);
+}, p = (e, t = w, n = []) => {
+  const r = f(null);
   return l(() => {
     const { current: i } = r;
     if (!i) return;
@@ -43,12 +44,12 @@ const y = (e) => {
     r.current && t(b(r.current));
   }, { ref: r } = p(n);
   return { ref: r, isOverFlowing: e };
-}, E = (e) => {
+}, P = (e) => {
   const [t, n] = u(!1), r = () => {
     i.current && n(y(i.current));
   }, { ref: i } = p(r, 200);
   return { ref: i, isTextWrapping: t };
-}, P = (e) => {
+}, E = (e) => {
   const [t, n] = u(
     () => a.findVar(e) ?? ""
   );
@@ -99,12 +100,13 @@ const F = () => {
   }, []), e;
 };
 export {
-  P as useCSSLookup,
+  E as useCSSLookup,
   V as useId,
-  M as useInteractiveProps,
+  k as useInteractiveProps,
   L as useIsOverFlowing,
-  E as useIsTextWrapping,
+  P as useIsTextWrapping,
   F as useMobileDetection,
+  M as usePrevious,
   T as useRTLDirection,
   p as useResizeObserver
 };

package/utils/hooks/useElementResize.cjs.js

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

package/utils/hooks/useElementResize.d.ts

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

package/utils/hooks/useElementResize.es.js

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

package/utils/hooks/usePrevious.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");function u(e){const r=t.useRef(void 0);return t.useEffect(()=>{r.current=e},[e]),r.current}exports.usePrevious=u;

package/utils/hooks/usePrevious.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns the value from the previous render.
+ * Returns `undefined` on the first render.
+ */
+export declare function usePrevious<T>(value: T): T | undefined;

package/utils/hooks/usePrevious.es.js

@@ -0,0 +1,10 @@
+import { useRef as t, useEffect as o } from "react";
+function f(r) {
+  const e = t(void 0);
+  return o(() => {
+    e.current = r;
+  }, [r]), e.current;
+}
+export {
+  f as usePrevious
+};

package/assets/floatingui.css

@@ -1 +0,0 @@
-.bm-floatingui{z-index:999;inset:unset;width:max-content;position:absolute;top:0;left:0}.bm-floatingui[popover]{overflow:unset;border:unset}.bm-floatingui__arrow{transform-origin:bottom;position:absolute}.bm-floatingui__overlay{background:var(--bm-comp-dialog-color-overlay);padding:var(--bm-comp-dialog-space-viewport-offset);z-index:1;justify-content:center;align-items:center;display:flex}.bm-floatingui__overlay--transparent{background:0 0}

package/chunks/dialog.module.C_6Qrg4w.js

@@ -1 +0,0 @@
-var i=require("../assets/dialog.css");const _={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-enterprise":"bm-enterprise","bm-consumer":"bm-consumer","bm-dialog":"bm-dialog","bm-dialog--sm":"bm-dialog--sm","bm-dialog--md":"bm-dialog--md","bm-dialog--lg":"bm-dialog--lg","bm-dialog--xl":"bm-dialog--xl","bm-dialog__header":"bm-dialog__header","bm-dialog__header__row":"bm-dialog__header__row","bm-dialog__header__icon":"bm-dialog__header__icon","bm-dialog__header__icon--information":"bm-dialog__header__icon--information","bm-dialog__header__icon--positive":"bm-dialog__header__icon--positive","bm-dialog__header__icon--negative":"bm-dialog__header__icon--negative","bm-dialog__header__icon--warning":"bm-dialog__header__icon--warning","bm-dialog__header__heading":"bm-dialog__header__heading","bm-dialog__header__close-trigger":"bm-dialog__header__close-trigger","bm-dialog__header__description":"bm-dialog__header__description","bm-dialog__header__children":"bm-dialog__header__children","bm-dialog__header__divider":"bm-dialog__header__divider","bm-dialog__body":"bm-dialog__body","bm-dialog__footer":"bm-dialog__footer","bm-dialog__footer__divider":"bm-dialog__footer__divider","bm-dialog__footer__actions":"bm-dialog__footer__actions","bm-dialog__footer__tertiaryActions":"bm-dialog__footer__tertiaryActions"};exports.styles=_;

package/chunks/floatingui.module.BcBFebz0.js

@@ -1,10 +0,0 @@
-import "../assets/floatingui.css";
-const i = {
-  "bm-floatingui": "bm-floatingui",
-  "bm-floatingui__arrow": "bm-floatingui__arrow",
-  "bm-floatingui__overlay": "bm-floatingui__overlay",
-  "bm-floatingui__overlay--transparent": "bm-floatingui__overlay--transparent"
-};
-export {
-  i as f
-};

package/chunks/floatingui.module.D3Aw_aYe.js

@@ -1 +0,0 @@
-var a=require("../assets/floatingui.css");const i={"bm-floatingui":"bm-floatingui","bm-floatingui__arrow":"bm-floatingui__arrow","bm-floatingui__overlay":"bm-floatingui__overlay","bm-floatingui__overlay--transparent":"bm-floatingui__overlay--transparent"};exports.floatinguiStyles=i;

package/chunks/panel.module.CVyUzyCZ.js

@@ -1 +0,0 @@
-var n=require("../assets/panel.css");const e={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-enterprise":"bm-enterprise","bm-consumer":"bm-consumer","bm-panel":"bm-panel","bm-panel--inline":"bm-panel--inline","bm-panel--overlay":"bm-panel--overlay","bm-panel--position-start":"bm-panel--position-start","bm-panel--position-end":"bm-panel--position-end","bm-panel--position-bottom":"bm-panel--position-bottom","bm-panel--size-full":"bm-panel--size-full","bm-panel--position-full":"bm-panel--position-full","bm-panel--floating":"bm-panel--floating","bm-panel--size-sm":"bm-panel--size-sm","bm-panel--size-md":"bm-panel--size-md","bm-panel--size-lg":"bm-panel--size-lg","bm-panel__body":"bm-panel__body","bm-panel--padding-sm":"bm-panel--padding-sm","bm-panel__header":"bm-panel__header","bm-panel__footer":"bm-panel__footer","bm-panel--padding-md":"bm-panel--padding-md","bm-panel__header__row":"bm-panel__header__row","bm-panel__header__content-before":"bm-panel__header__content-before","bm-panel__header__content-after":"bm-panel__header__content-after","bm-panel__header__heading":"bm-panel__header__heading","bm-panel__header__description":"bm-panel__header__description","bm-panel__header__close-button":"bm-panel__header__close-button","bm-panel__footer__actions":"bm-panel__footer__actions","bm-panel__footer__actions--start":"bm-panel__footer__actions--start","bm-panel__footer__actions--end":"bm-panel__footer__actions--end","bm-panel__footer__actions--spaceBetween":"bm-panel__footer__actions--spaceBetween","bm-panel__footer__actions--stacked":"bm-panel__footer__actions--stacked","bm-panel__overlay-divider":"bm-panel__overlay-divider","bm-panel__overlay-divider--start":"bm-panel__overlay-divider--start","bm-panel__overlay-divider--end":"bm-panel__overlay-divider--end","bm-panel__overlay-divider--bottom":"bm-panel__overlay-divider--bottom","bm-panel__resize-handle":"bm-panel__resize-handle","bm-panel--resizable":"bm-panel--resizable","bm-panel__inline-wrapper":"bm-panel__inline-wrapper","bm-panel__inline-wrapper--size-sm":"bm-panel__inline-wrapper--size-sm","bm-panel__inline-wrapper--size-md":"bm-panel__inline-wrapper--size-md","bm-panel__inline-wrapper--size-lg":"bm-panel__inline-wrapper--size-lg","bm-panel__inline-wrapper--size-full":"bm-panel__inline-wrapper--size-full","bm-panel__inline-wrapper-content":"bm-panel__inline-wrapper-content"};exports.styles=e;