@viasat/beam-react 2.10.1 → 2.11.0

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

@@ -1,40 +1,62 @@
-import { useState as o, useEffect as u } from "react";
-const c = 400, m = (e) => e || "end", f = (e, t) => {
-  const n = e && t !== "full";
+import { useState as c, useEffect as m, useCallback as f } from "react";
+const a = 400, I = (s) => s || "end", A = (s, t) => {
+  const r = s && t !== "full";
   return {
-    showDivider: n,
-    dividerBefore: n && t !== "start" && t !== "bottom",
-    dividerAfter: n && t === "start"
+    showDivider: r,
+    dividerBefore: r && t !== "start" && t !== "bottom",
+    dividerAfter: r && t === "start"
   };
-}, I = (e, t) => {
-  const [n, i] = o(void 0), [a, s] = o(e !== !1);
-  return u(() => {
+}, v = (s) => s === "escape-key" ? "escapeKey" : s === "outside-press" ? "outsidePress" : "programmatic", P = (s, t) => {
+  const r = f(
+    (u) => {
+      if (!s) {
+        t == null || t(!1);
+        return;
+      }
+      const e = s(u);
+      e instanceof Promise ? e.then((i) => {
+        i && (t == null || t(!1));
+      }).catch(() => {
+      }) : e && (t == null || t(!1));
+    },
+    [s, t]
+  ), l = f(
+    (u, e, i) => {
+      u ? t == null || t(!0) : r(v(i));
+    },
+    [t, r]
+  );
+  return { requestClose: r, handleOverlayOpenChange: l };
+}, S = (s, t) => {
+  const [r, l] = c(void 0), [u, e] = c(s !== !1);
+  return m(() => {
     if (!t) {
-      s(e !== !1), i(void 0);
+      e(s !== !1), l(void 0);
       return;
     }
-    if (e !== void 0)
-      if (e) {
-        s(!0), i("close");
-        let r;
-        const l = requestAnimationFrame(() => {
-          r = requestAnimationFrame(() => i("open"));
+    if (s !== void 0)
+      if (s) {
+        e(!0), l("close");
+        let i;
+        const d = requestAnimationFrame(() => {
+          i = requestAnimationFrame(() => l("open"));
         });
         return () => {
-          cancelAnimationFrame(l), cancelAnimationFrame(r);
+          cancelAnimationFrame(d), cancelAnimationFrame(i);
         };
       } else {
-        i("close");
-        const r = setTimeout(() => {
-          s(!1), i(void 0);
-        }, c);
-        return () => clearTimeout(r);
+        l("close");
+        const i = setTimeout(() => {
+          e(!1), l(void 0);
+        }, a);
+        return () => clearTimeout(i);
       }
-  }, [t, e]), { inlineStatus: n, isInlineVisible: a };
+  }, [t, s]), { inlineStatus: r, isInlineVisible: u };
 };
 export {
-  c as PANEL_TRANSITION_DURATION_MS,
-  f as getPanelDividerState,
-  m as getResolvedPanelPosition,
-  I as useInlineTransition
+  a as PANEL_TRANSITION_DURATION_MS,
+  A as getPanelDividerState,
+  I as getResolvedPanelPosition,
+  S as useInlineTransition,
+  P as usePanelClose
 };

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

@@ -4,6 +4,15 @@ export type PanelPosition = 'start' | 'end' | 'bottom' | 'full';
 export type PanelModalType = 'nonModal' | 'isModal' | 'alert';
 export type PanelSize = 'sm' | 'md' | 'lg' | 'full' | 'custom';
 export type PanelPadding = 'sm' | 'md';
+/**
+ * The reason a Panel close was requested via user interaction.
+ *
+ * - `'escapeKey'`    — user pressed Escape (overlay panels only)
+ * - `'outsidePress'` — user clicked outside the panel (overlay panels only)
+ * - `'closeButton'`  — user clicked the header close button
+ * - `'programmatic'` — close was triggered by another interaction not covered above
+ */
+export type PanelCloseReason = 'escapeKey' | 'outsidePress' | 'closeButton' | 'programmatic';
 interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
     /**
      * Specify the content of the Panel
@@ -54,6 +63,31 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      * @default 'end'
      */
     position?: PanelPosition;
+    /**
+     * 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
+     * a form with unsaved changes.
+     *
+     * This callback is **not** invoked when the `open` prop is changed programmatically
+     * by the parent; it only fires for UI-triggered close events (close button, Escape
+     * key, or outside press).
+     *
+     * @example
+     * ```tsx
+     * // Use a stateful confirmation dialog — avoid window.confirm (blocking, breaks iframes).
+     * // See the `onBeforeClose (Unsaved Changes Guard)` story for a full reference implementation.
+     * <Panel
+     *   onBeforeClose={(reason) => {
+     *     if (!isDirty) return true;
+     *     return new Promise(resolve => {
+     *       setResolveClose(() => resolve);
+     *       setShowConfirmDialog(true);
+     *     });
+     *   }}
+     * />
+     * ```
+     */
+    onBeforeClose?: (reason: PanelCloseReason) => boolean | Promise<boolean>;
 }
 export interface InlinePanelProps extends BasePanelProps {
     /**

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

@@ -1,5 +1,5 @@
 export { Panel } from './Panel';
-export type { PanelProps, InlinePanelProps, OverlayPanelProps, PanelKind, PanelPosition, PanelModalType, PanelSize, PanelPadding, } from './Panel.types';
+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';

package/package.json

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

package/chunks/FloatingUI.context.BULqADss.js

@@ -1 +0,0 @@
-"use strict";const h=require("react"),$=require("@floating-ui/dom"),H=require("@floating-ui/react"),K=require("../lib/FloatingUI/FloatingUI.interactions.cjs.js"),N=Math.min,Q=Math.max,V={left:"right",right:"left",bottom:"top",top:"bottom"};function Z(t,e,i){return Q(t,N(e,i))}function w(t,e){return typeof t=="function"?t(e):t}function T(t){return t.split("-")[0]}function tt(t){return t.split("-")[1]}function k(t){return t==="x"?"y":"x"}function et(t){return t==="y"?"height":"width"}function nt(t){return["top","bottom"].includes(T(t))?"y":"x"}function ot(t){return k(nt(t))}function st(t){return t.replace(/left|right|bottom|top/g,e=>V[e])}function it(t){return{top:0,right:0,bottom:0,left:0,...t}}function ct(t){return typeof t!="number"?it(t):{top:t,right:t,bottom:t,left:t}}const lt=t=>{var e;return{visibility:(e=t.hide)!=null&&e.referenceHidden?"hidden":"visible"}},rt=t=>({name:"arrowStyles",options:t,async fn(e){var W,Y;const{x:i,y:c,placement:r,rects:s,platform:n,elements:a,middlewareData:O}=e,{element:d,padding:g=0}=w(t,e)||{};if(d==null)return{};const P=ct(g),m={x:i,y:c},l=ot(r),S=k(l),x=et(l),f=await n.getDimensions(d),o=l==="y",B=o?"top":"left",D=o?"bottom":"right",M=o?"clientHeight":"clientWidth",j=s.reference[x]+s.reference[l]-m[l]-s.floating[x],X=m[l]-s.reference[l],A=await((W=n.getOffsetParent)==null?void 0:W.call(n,d));let p=A?A[M]:0;(!p||!await((Y=n.isElement)==null?void 0:Y.call(n,A)))&&(p=a.floating[M]||s.floating[x]);const _=j/2-X/2,F=p/2-f.width/2-1,v=N(P[B],F),U=N(P[D],F),y=v,b=p-f.width-U,u=p/2-f.width/2+_,I=Z(y,u,b),E=!O.arrow&&tt(r)!=null&&u!==I&&s.reference[x]/2-(u<y?v:U)-f.width/2<0,C=E?u<y?u-y:u-b:0,q=T(r),R=["top","left"].includes(q)?-1:1,z=f.height*R,J=ft({placement:q,arrowHeight:f.height,arrowWidth:f.width,[l]:I});return{[l]:m[l]+C,[S]:m[S]+z,data:J,reset:E}}}),L=(t,e,i,c)=>{if(c){const r=c===!0?i():i(c);t[e](r)}},ut=({baseConfig:t,middleware:e,offset:i,arrow:c,placement:r="top"})=>{const s={...t,placement:r};let n=[];if(typeof e.overrides!="object"){n.push($.offset(i));let a=e.flip??!0;e.autoPlacement&&(a=!1),L(n,"unshift",$.autoPlacement,e.autoPlacement),L(n,"push",$.shift,e.shift??!0),L(n,"unshift",$.flip,a),L(n,"push",$.hide,e.hide??!0)}else n.push(...e.overrides);return c.hide||n.push(rt(c.options)),typeof e.overrides=="function"&&(n=e.overrides(n)),s.middleware=n,s},ft=({placement:t,arrowHeight:e,arrowWidth:i,x:c,y:r})=>{const s=T(t),n=i/2-e,a={top:"rotate(0deg)",bottom:"rotate(180deg)",left:`rotate(-90deg) translateX(${-n}px)`,right:`rotate(90deg) translateX(${n}px)`}[s],O=-i/2-e,d={top:`${-e}px`,bottom:`${-e*2}px`,left:`${O}px`,right:`${O}px`}[s],g={transform:a};g.left=c!=null?`${c}px`:"",g.top=r!=null?`${r}px`:"";const P=st(s);return g[P]=d,g},at=({defaultOpen:t=!1,open:e,placement:i="top",offset:c,onOpenChange:r,openOnClick:s,openOnHover:n,openOnFocus:a,openOnSelected:O,focusConfiguration:d,listNavigation:g,typeahead:P,middleware:m,autoPlacement:l,flip:S=!0,shift:x=!0,autoHiding:f,arrow:o,transitionConfig:B,portalled:D,role:M,rootContext:j})=>{const[X,A]=h.useState(t),[p,_]=h.useState(),[F,v]=h.useState(),[U,y]=h.useState(null),b=e??X,u=r??A,I=H.useFloatingNodeId(),E=h.useMemo(()=>{const z={open:b,onOpenChange:u,whileElementsMounted:H.autoUpdate,nodeId:I,rootContext:j};return{...ut({baseConfig:z,middleware:{overrides:m,autoPlacement:l,flip:S,shift:x,hide:f},arrow:{hide:(o==null?void 0:o.hide)??!1,options:{element:U||null,padding:o==null?void 0:o.edgePadding}},placement:i,offset:c??0})}},[I,b,u,m,l,S,x,f,o==null?void 0:o.hide,o==null?void 0:o.edgePadding,U,i,c,j]),C=H.useFloating(E),q=C.context,R=K.useConfigurableInteractions({context:q,openOnClick:s,openOnHover:n,openOnFocus:a,openOnSelected:O,role:M,listNavigation:g,typeahead:P});return h.useMemo(()=>({open:b,setOpen:u,...R,...C,portalled:D,focusConfiguration:d,transitionConfig:B,labelId:p,descriptionId:F,arrow:o,setLabelId:_,setDescriptionId:v,setArrowEl:y,nodeId:I}),[b,u,R,C,D,d,B,p,F,o,I])},G=h.createContext(null),dt=()=>{const t=h.useContext(G);if(t==null)throw new Error("FloatingUI components must be wrapped in <FloatingUI />");return t};exports.BmFloatingUIContext=G;exports.useBmFloatingUI=at;exports.useBmFloatingUIContext=dt;exports.visibilityHandler=lt;