@viasat/beam-react 2.45.0 → 2.46.0

package/lib/Panel/Panel.Body.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),i=require("clsx"),d=require("../../chunks/classNames.DC8Ra4sw.js");require("../../chunks/constants.CgMu0_1M.js");const x=require("../Box/Box.cjs.js"),b=require("./Panel.context.cjs.js"),m=require("../../chunks/panel.module.BzLGa7GY.js"),{subElementClassPrefix:B}=d.getBEMClassNames("panel"),y=`${B}body`,e=({children:s,className:o,backgroundColor:t,tabIndex:n=0,...r})=>{const{backgroundColor:l}=b.usePanelContext(),a=t??l,c=i(m.styles[y],o);return u.jsx(x.Box,{className:c,backgroundColor:a,tabIndex:n,...r,children:s})};e.displayName="Panel.Body";exports.Body=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("clsx"),i=require("../../chunks/classNames.DC8Ra4sw.js");require("../../chunks/constants.CgMu0_1M.js");const d=require("../Box/Box.cjs.js"),x=require("./Panel.context.cjs.js"),b=require("../../chunks/panel.module.BzLGa7GY.js"),{subElementClassPrefix:m}=i.getBEMClassNames("panel"),B=`${m}body`,e=({children:s,className:o,backgroundColor:t,...n})=>{const{backgroundColor:r}=x.usePanelContext(),l=t??r,a=u(b.styles[B],o);return c.jsx(d.Box,{className:a,backgroundColor:l,...n,children:s})};e.displayName="Panel.Body";exports.Body=e;

package/lib/Panel/Panel.Body.d.ts

@@ -11,6 +11,6 @@ export interface PanelBodyProps extends ComponentPropsWithoutRef<'div'> {
     backgroundColor?: BoxBackgroundColor;
 }
 export declare const Body: {
-    ({ children, className: _className, backgroundColor, tabIndex, ...props }: PanelBodyProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className: _className, backgroundColor, ...props }: PanelBodyProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/Panel/Panel.Body.es.js

@@ -1,21 +1,20 @@
-import { jsx as n } from "react/jsx-runtime";
-import c from "clsx";
-import { g as p } from "../../chunks/classNames.ZWNk1hey.js";
+import { jsx as l } from "react/jsx-runtime";
+import n from "clsx";
+import { g as c } from "../../chunks/classNames.ZWNk1hey.js";
 import "../../chunks/constants.Cruz2A1w.js";
-import { Box as i } from "../Box/Box.es.js";
-import { usePanelContext as d } from "./Panel.context.es.js";
-import { s as f } from "../../chunks/panel.module.CgFBtvbR.js";
-const { subElementClassPrefix: x } = p("panel"), C = `${x}body`, g = ({
+import { Box as p } from "../Box/Box.es.js";
+import { usePanelContext as i } from "./Panel.context.es.js";
+import { s as d } from "../../chunks/panel.module.CgFBtvbR.js";
+const { subElementClassPrefix: f } = c("panel"), x = `${f}body`, C = ({
   children: o,
   className: s,
   backgroundColor: r,
-  tabIndex: t = 0,
-  ...e
+  ...t
 }) => {
-  const { backgroundColor: a } = d(), m = r ?? a, l = c(f[C], s);
-  return /* @__PURE__ */ n(i, { className: l, backgroundColor: m, tabIndex: t, ...e, children: o });
+  const { backgroundColor: e } = i(), a = r ?? e, m = n(d[x], s);
+  return /* @__PURE__ */ l(p, { className: m, backgroundColor: a, ...t, children: o });
 };
-g.displayName = "Panel.Body";
+C.displayName = "Panel.Body";
 export {
-  g as Body
+  C as Body
 };

package/lib/Panel/Panel.Overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),S=require("clsx"),f=require("react"),h=require("../../chunks/classNames.DC8Ra4sw.js");require("../../chunks/constants.CgMu0_1M.js");const k=require("./Panel.context.cjs.js"),D=require("./Panel.helpers.cjs.js"),z=require("../FloatingUI/FloatingUI.root.cjs.js"),$=require("../FloatingUI/FloatingUI.content.cjs.js"),A=require("../../chunks/FloatingUI.context.B15Tz_4h.js"),B=require("./Panel.Divider.cjs.js"),H=require("./Panel.ResizeHandle.cjs.js"),R=require("./Panel.useResize.cjs.js"),C=require("../../chunks/panel.module.BzLGa7GY.js"),{baseClassNamePrefix:g,variable:j}=h.getBEMClassNames("panel");function E(s,n,e){if(!(!s&&!n&&!e))return{...s,...n,...e?{[j("offset-x")]:e.x,[j("offset-y")]:e.y}:null}}const w=({children:s,panelClassName:n,resolvedPosition:e,showDivider:_,dividerColor:t,resizeConfig:o,floatingOffset:v,overlayDividerClassName:P,isBlocking:d,cssVarStyle:y,skipMountAnimation:x,container:r,style:m,...q})=>{const{refs:b}=A.useBmFloatingUIContext(),{handleRef:i}=R.usePanelResize({resizeConfig:o,position:e,floatingRef:b.floating,requireMount:!0,container:r}),l=E(m,y,v),F=f.useMemo(()=>d?r?{lockScroll:!1}:!0:{lockScroll:!1},[d,r]);return a.jsxs($.Content,{className:n,skipFloatingStyles:!0,overlay:F,...q,style:l,"data-position":e,...x?{"data-status":"open"}:{},children:[s,_&&a.jsx(B.InlineDivider,{position:e,className:P,dividerColor:t}),o&&a.jsx(H.PanelResizeHandle,{ref:i})]})},G=({contextValue:s,panelClassName:n,resolvedPosition:e,showDivider:_,modalType:t,closeOnOutsidePress:o,floatingOffset:v,open:P,onOpenChange:d,transitionConfig:y,dividerColor:x,children:r,resizeConfig:m,cssVarStyle:q,skipMountAnimation:b,container:i,triggerRef:l,...F})=>{const u=t??"isModal",I=u==="isModal"||u==="alert",p=f.useCallback(c=>{const M=(l==null?void 0:l.current)??null;return!(M&&c.target instanceof Node&&M.contains(c.target))},[l]),U=f.useMemo(()=>{const c=D.getPanelDismissConfig(t,o);return!l||!(u==="isModal"||u==="nonModal"&&(o??!1))?c:{...c??{},outsidePress:p}},[t,u,o,l,p]),N=S(C.styles[`${g}__overlay-divider`],C.styles[`${g}__overlay-divider--${e}`]);return a.jsx(k.PanelContext.Provider,{value:s,children:a.jsx(z.FloatingUIRoot,{open:P,onOpenChange:d,portalled:i?{root:i}:!0,transitionConfig:y,dismiss:U,focusConfiguration:I?!0:{modal:!1,closeOnFocusOut:!1},children:a.jsx(w,{panelClassName:n,resolvedPosition:e,showDivider:_,dividerColor:x,floatingOffset:v,overlayDividerClassName:N,isBlocking:I,resizeConfig:m,cssVarStyle:q,skipMountAnimation:b,container:i,...F,role:t==="alert"?"alertdialog":"dialog","aria-modal":I||void 0,children:r})})})};exports.OverlayPanel=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("clsx"),I=require("react"),h=require("../../chunks/classNames.DC8Ra4sw.js");require("../../chunks/constants.CgMu0_1M.js");const k=require("./Panel.context.cjs.js"),D=require("./Panel.helpers.cjs.js"),z=require("../FloatingUI/FloatingUI.root.cjs.js"),$=require("../FloatingUI/FloatingUI.content.cjs.js"),A=require("../../chunks/FloatingUI.context.B15Tz_4h.js"),B=require("./Panel.Divider.cjs.js"),H=require("./Panel.ResizeHandle.cjs.js"),O=require("./Panel.useResize.cjs.js"),g=require("../../chunks/panel.module.BzLGa7GY.js"),{baseClassNamePrefix:C,variable:j}=h.getBEMClassNames("panel");function R(s,a,e){if(!(!s&&!a&&!e))return{...s,...a,...e?{[j("offset-x")]:e.x,[j("offset-y")]:e.y}:null}}const T=({children:s,panelClassName:a,resolvedPosition:e,showDivider:_,dividerColor:n,resizeConfig:o,floatingOffset:v,overlayDividerClassName:P,isBlocking:d,cssVarStyle:y,skipMountAnimation:m,container:r,style:x,...b})=>{const{refs:q}=A.useBmFloatingUIContext(),{handleRef:i}=O.usePanelResize({resizeConfig:o,position:e,floatingRef:q.floating,requireMount:!0,container:r}),l=R(x,y,v),f=I.useMemo(()=>d?r?{lockScroll:!1}:!0:{lockScroll:!1},[d,r]);return t.jsxs($.Content,{className:a,skipFloatingStyles:!0,overlay:f,...b,style:l,"data-position":e,...m?{"data-status":"open"}:{},children:[s,_&&t.jsx(B.InlineDivider,{position:e,className:P,dividerColor:n}),o&&t.jsx(H.PanelResizeHandle,{ref:i})]})},E=({contextValue:s,panelClassName:a,resolvedPosition:e,showDivider:_,modalType:n,closeOnOutsidePress:o,floatingOffset:v,open:P,onOpenChange:d,transitionConfig:y,dividerColor:m,children:r,resizeConfig:x,cssVarStyle:b,skipMountAnimation:q,container:i,triggerRef:l,...f})=>{const u=n??"isModal",p=u==="isModal"||u==="alert",M=I.useCallback(c=>{const F=(l==null?void 0:l.current)??null;return!(F&&c.target instanceof Node&&F.contains(c.target))},[l]),U=I.useMemo(()=>{const c=D.getPanelDismissConfig(n,o);return!l||!(u==="isModal"||u==="nonModal"&&(o??!1))?c:{...c??{},outsidePress:M}},[n,u,o,l,M]),N=S(g.styles[`${C}__overlay-divider`],g.styles[`${C}__overlay-divider--${e}`]);return t.jsx(k.PanelContext.Provider,{value:s,children:t.jsx(z.FloatingUIRoot,{open:P,onOpenChange:d,portalled:i?{root:i,preserveTabOrder:!1}:{preserveTabOrder:!1},transitionConfig:y,dismiss:U,focusConfiguration:p?{modal:!0}:{modal:!1,guards:!1,closeOnFocusOut:!1},children:t.jsx(T,{panelClassName:a,resolvedPosition:e,showDivider:_,dividerColor:m,floatingOffset:v,overlayDividerClassName:N,isBlocking:p,resizeConfig:x,cssVarStyle:b,skipMountAnimation:q,container:i,...f,role:n==="alert"?"alertdialog":"dialog","aria-modal":p||void 0,children:r})})})};exports.OverlayPanel=E;

package/lib/Panel/Panel.Overlay.es.js

@@ -1,59 +1,59 @@
-import { jsx as u, jsxs as $ } from "react/jsx-runtime";
-import j from "clsx";
-import { useCallback as A, useMemo as _ } from "react";
-import { g as B } from "../../chunks/classNames.ZWNk1hey.js";
+import { jsx as d, jsxs as $ } from "react/jsx-runtime";
+import g from "clsx";
+import { useCallback as j, useMemo as S } from "react";
+import { g as A } from "../../chunks/classNames.ZWNk1hey.js";
 import "../../chunks/constants.Cruz2A1w.js";
-import { PanelContext as U } from "./Panel.context.es.js";
-import { getPanelDismissConfig as g } from "./Panel.helpers.es.js";
+import { PanelContext as B } from "./Panel.context.es.js";
+import { getPanelDismissConfig as U } from "./Panel.helpers.es.js";
 import { FloatingUIRoot as q } from "../FloatingUI/FloatingUI.root.es.js";
 import { Content as z } from "../FloatingUI/FloatingUI.content.es.js";
 import { a as E } from "../../chunks/FloatingUI.context.Dl4Y1y1z.js";
 import { InlineDivider as H } from "./Panel.Divider.es.js";
-import { PanelResizeHandle as w } from "./Panel.ResizeHandle.es.js";
-import { usePanelResize as G } from "./Panel.useResize.es.js";
-import { s as F } from "../../chunks/panel.module.CgFBtvbR.js";
-const { baseClassNamePrefix: I, variable: S } = B("panel");
-function J(t, r, o) {
-  if (!(!t && !r && !o))
+import { PanelResizeHandle as T } from "./Panel.ResizeHandle.es.js";
+import { usePanelResize as w } from "./Panel.useResize.es.js";
+import { s as k } from "../../chunks/panel.module.CgFBtvbR.js";
+const { baseClassNamePrefix: F, variable: I } = A("panel");
+function G(r, s, o) {
+  if (!(!r && !s && !o))
     return {
-      ...t,
       ...r,
+      ...s,
       ...o ? {
-        [S("offset-x")]: o.x,
-        [S("offset-y")]: o.y
+        [I("offset-x")]: o.x,
+        [I("offset-y")]: o.y
       } : null
     };
 }
-const K = ({
-  children: t,
-  panelClassName: r,
+const J = ({
+  children: r,
+  panelClassName: s,
   resolvedPosition: o,
-  showDivider: d,
-  dividerColor: s,
+  showDivider: c,
+  dividerColor: a,
   resizeConfig: l,
   floatingOffset: f,
   overlayDividerClassName: p,
-  isBlocking: c,
+  isBlocking: u,
   cssVarStyle: v,
   skipMountAnimation: y,
-  container: a,
+  container: t,
   style: x,
   ...C
 }) => {
-  const { refs: M } = E(), { handleRef: n } = G({
+  const { refs: M } = E(), { handleRef: n } = w({
     resizeConfig: l,
     position: o,
     floatingRef: M.floating,
     requireMount: !0,
-    container: a
-  }), e = J(x, v, f), P = _(
-    () => c ? a ? { lockScroll: !1 } : !0 : { lockScroll: !1 },
-    [c, a]
+    container: t
+  }), e = G(x, v, f), P = S(
+    () => u ? t ? { lockScroll: !1 } : !0 : { lockScroll: !1 },
+    [u, t]
   );
   return /* @__PURE__ */ $(
     z,
     {
-      className: r,
+      className: s,
       skipFloatingStyles: !0,
       overlay: P,
       ...C,
@@ -61,32 +61,32 @@ const K = ({
       "data-position": o,
       ...y ? { "data-status": "open" } : {},
       children: [
-        t,
-        d && /* @__PURE__ */ u(
+        r,
+        c && /* @__PURE__ */ d(
           H,
           {
             position: o,
             className: p,
-            dividerColor: s
+            dividerColor: a
           }
         ),
-        l && /* @__PURE__ */ u(w, { ref: n })
+        l && /* @__PURE__ */ d(T, { ref: n })
       ]
     }
   );
-}, so = ({
-  contextValue: t,
-  panelClassName: r,
+}, ao = ({
+  contextValue: r,
+  panelClassName: s,
   resolvedPosition: o,
-  showDivider: d,
-  modalType: s,
+  showDivider: c,
+  modalType: a,
   closeOnOutsidePress: l,
   floatingOffset: f,
   open: p,
-  onOpenChange: c,
+  onOpenChange: u,
   transitionConfig: v,
   dividerColor: y,
-  children: a,
+  children: t,
   resizeConfig: x,
   cssVarStyle: C,
   skipMountAnimation: M,
@@ -94,40 +94,40 @@ const K = ({
   triggerRef: e,
   ...P
 }) => {
-  const i = s ?? "isModal", N = i === "isModal" || i === "alert", k = A(
+  const i = a ?? "isModal", N = i === "isModal" || i === "alert", h = j(
     (m) => {
-      const h = (e == null ? void 0 : e.current) ?? null;
-      return !(h && m.target instanceof Node && h.contains(m.target));
+      const b = (e == null ? void 0 : e.current) ?? null;
+      return !(b && m.target instanceof Node && b.contains(m.target));
     },
     [e]
-  ), b = _(() => {
-    const m = g(s, l);
-    return !e || !(i === "isModal" || i === "nonModal" && (l ?? !1)) ? m : { ...m ?? {}, outsidePress: k };
+  ), _ = S(() => {
+    const m = U(a, l);
+    return !e || !(i === "isModal" || i === "nonModal" && (l ?? !1)) ? m : { ...m ?? {}, outsidePress: h };
   }, [
-    s,
+    a,
     i,
     l,
     e,
-    k
-  ]), D = j(
-    F[`${I}__overlay-divider`],
-    F[`${I}__overlay-divider--${o}`]
+    h
+  ]), D = g(
+    k[`${F}__overlay-divider`],
+    k[`${F}__overlay-divider--${o}`]
   );
-  return /* @__PURE__ */ u(U.Provider, { value: t, children: /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(B.Provider, { value: r, children: /* @__PURE__ */ d(
     q,
     {
       open: p,
-      onOpenChange: c,
-      portalled: n ? { root: n } : !0,
+      onOpenChange: u,
+      portalled: n ? { root: n, preserveTabOrder: !1 } : { preserveTabOrder: !1 },
       transitionConfig: v,
-      dismiss: b,
-      focusConfiguration: N ? !0 : { modal: !1, closeOnFocusOut: !1 },
-      children: /* @__PURE__ */ u(
-        K,
+      dismiss: _,
+      focusConfiguration: N ? { modal: !0 } : { modal: !1, guards: !1, closeOnFocusOut: !1 },
+      children: /* @__PURE__ */ d(
+        J,
         {
-          panelClassName: r,
+          panelClassName: s,
           resolvedPosition: o,
-          showDivider: d,
+          showDivider: c,
           dividerColor: y,
           floatingOffset: f,
           overlayDividerClassName: D,
@@ -137,14 +137,14 @@ const K = ({
           skipMountAnimation: M,
           container: n,
           ...P,
-          role: s === "alert" ? "alertdialog" : "dialog",
+          role: a === "alert" ? "alertdialog" : "dialog",
           "aria-modal": N || void 0,
-          children: a
+          children: t
         }
       )
     }
   ) });
 };
 export {
-  so as OverlayPanel
+  ao as OverlayPanel
 };

package/lib/Panel/Panel.d.ts

@@ -31,7 +31,7 @@ export declare const Panel: {
         };
     };
     Body: {
-        ({ children, className: _className, backgroundColor, tabIndex, ...props }: import('./Panel.Body').PanelBodyProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className: _className, backgroundColor, ...props }: import('./Panel.Body').PanelBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {

package/package.json

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