@viasat/beam-react 2.19.0 → 2.20.0

package/lib/Card/Card.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),o=require("react"),P=require("clsx"),ne=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const de=require("../Box/Box.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const oe=require("../../utils/hooks/useInteractiveProps.cjs.js"),t=require("../../chunks/card.module.8KnCe1uR.js"),ce=require("../Box/utils.cjs.js"),ue=require("./Card.MediaAbove.cjs.js"),be=require("./Card.Header.cjs.js"),_e=require("./Card.MediaBelow.cjs.js"),fe=require("./Card.Body.cjs.js"),ye=require("./Card.Content.cjs.js"),Ce=require("./Card.Footer.cjs.js"),me=require("./CardContext.cjs.js"),pe=require("./useCardGroup.cjs.js"),he=require("../StateLayer/StateLayer.cjs.js"),{baseClassNamePrefix:c,classModifierPrefix:d,subElementClassPrefix:u}=ne.getBEMClassNames("card"),qe='button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])',n=({children:R,className:k,density:N="md",borderColor:g,borderRadius:C,backgroundColor:B,shadow:E,type:S,as:L,disabled:T=!1,href:M,target:A,rel:j,onClick:s,selectionMode:O="single",showIndicator:G=!1,selected:H,defaultSelected:V=!1,onSelect:F,name:K,value:U,style:m,...b})=>{const p=me.useCardGroupContext();process.env.NODE_ENV!=="production"&&p&&S==="clickable"&&console.warn('Card: type="clickable" is ignored when Card is inside a CardGroup; treating as selectable instead.');const h=p?"selectable":S,q=!!h,a=h==="clickable",i=h==="selectable",{selected:v,handleChange:W,resolvedValue:X,isSelectionEligible:x,resolvedDisabled:r,resolvedName:z,resolvedShowIndicator:J,inputType:w}=pe.useCardGroup({cardGroup:p,selected:H,defaultSelected:V,value:U,id:b.id,disabled:T,name:K,selectionMode:O,showIndicator:G,onSelect:F}),I=o.useRef(null),_=L??(a&&M?"a":"div"),Q=o.useMemo(()=>C?{...m,"--bm-card-radius-outer":ce.BOX_BORDER_RADIUS_TO_CSS_VAR[C]}:m,[C,m]),f=o.useCallback(e=>{if(!e||!(e instanceof Element))return!1;const $=e.closest(qe);if(!$)return!1;const l=e.closest(`.${t.styles[c]}`);return $!==l},[]),Y=o.useCallback(e=>{if(r)return;if(f(e.target)){if(a&&_==="a"){const l=e.target,D=l==null?void 0:l.closest('a, [role="link"]');(!D||D===e.currentTarget)&&e.preventDefault()}return}if(a&&(s==null||s(e)),i){if(!x)return;const l=e.target;if(l.tagName==="INPUT"&&l.hasAttribute("data-card-input"))return;I.current&&I.current.click()}},[a,i,x,f,_,s,r]),Z=o.useCallback(e=>{r||e.key!=="Enter"&&e.key!==" "||f(e.target)||(e.preventDefault(),a&&(s==null||s(e)))},[a,f,s,r]),ee=P(t.styles[c],!B&&t.styles[`${c}--default-background`],!E&&t.styles[`${c}--default-shadow`],!g&&t.styles[`${c}--default-border`],q&&t.styles[`${d}interactive`],a&&t.styles[`${d}clickable`],i&&t.styles[`${d}selectable`],i&&v&&t.styles[`${d}selected`],r&&t.styles[`${d}disabled`],N&&t.styles[`${d}density-${N}`],k),te=oe.useInteractiveProps({isInteractive:q,disabled:r,isClickable:a,elementType:_,href:a?M:void 0,target:a?A:void 0,rel:a?j:void 0,onClick:Y,onKeyDown:Z}),ae=()=>!i||!x?null:y.jsx("input",{ref:I,type:w,className:t.styles[`${u}hidden-input`],checked:v,disabled:r,name:z,value:X,onChange:W,"aria-label":b["aria-label"],"aria-labelledby":b["aria-labelledby"],"data-card-input":""}),re=()=>{if(!i||!J)return null;const e=P(t.styles[`${u}selection-indicator`],t.styles[`${u}selection-indicator--${w}`],v&&t.styles[`${u}selection-indicator--checked`],r&&t.styles[`${u}selection-indicator--disabled`]);return y.jsx("span",{className:e,"aria-hidden":"true"})},{"aria-label":se,"aria-labelledby":ie,...le}=b;return y.jsxs(de.Box,{as:_,className:ee,borderColor:g,borderWidth:"md",backgroundColor:B,shadow:E,style:Q,...te,...le,"aria-label":i?void 0:se,"aria-labelledby":i?void 0:ie,children:[ae(),re(),q&&!r&&y.jsx(he.StateLayer,{}),R]})};n.displayName="Card";n.MediaAbove=ue.MediaAbove;n.MediaBelow=_e.MediaBelow;n.Header=be.Header;n.Body=fe.Body;n.Content=ye.Content;n.Footer=Ce.Footer;exports.Card=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react/jsx-runtime"),d=require("react"),T=require("clsx"),ue=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const be=require("../Box/Box.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const fe=require("../../utils/hooks/useInteractiveProps.cjs.js"),t=require("../../chunks/card.module.8KnCe1uR.js"),_e=require("../../chunks/form.context.B26th8Od.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const ye=require("../Box/utils.cjs.js"),Ce=require("./Card.MediaAbove.cjs.js"),me=require("./Card.Header.cjs.js"),qe=require("./Card.MediaBelow.cjs.js"),ve=require("./Card.Body.cjs.js"),xe=require("./Card.Content.cjs.js"),he=require("./Card.Footer.cjs.js"),pe=require("./CardContext.cjs.js"),Ie=require("./useCardGroup.cjs.js"),$e=require("../StateLayer/StateLayer.cjs.js"),{baseClassNamePrefix:u,classModifierPrefix:c,subElementClassPrefix:b}=ue.getBEMClassNames("card"),ge='button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])',o=({children:P,className:k,density:g="md",borderColor:N,borderRadius:m,backgroundColor:E,shadow:B,type:S,as:L,disabled:O=!1,href:M,target:A,rel:H,onClick:i,selectionMode:j="single",showIndicator:F=!1,selected:V,defaultSelected:K=!1,onSelect:U,name:W,value:X,style:q,...f})=>{const a=pe.useCardGroupContext(),z=!!a,{ctxDisabled:G}=d.useContext(_e.FormContext),J=O||(z?!1:G);process.env.NODE_ENV!=="production"&&a&&S==="clickable"&&console.warn('Card: type="clickable" is ignored when Card is inside a CardGroup; treating as selectable instead.');const v=a?"selectable":S,x=!!v,r=v==="clickable",l=v==="selectable",{selected:h,handleChange:Q,resolvedValue:Y,isSelectionEligible:p,resolvedDisabled:s,resolvedName:Z,resolvedShowIndicator:ee,inputType:w}=Ie.useCardGroup({cardGroup:a,selected:V,defaultSelected:K,value:X,id:f.id,disabled:J,name:W,selectionMode:j,showIndicator:F,onSelect:U}),I=d.useRef(null),_=L??(r&&M?"a":"div"),te=d.useMemo(()=>m?{...q,"--bm-card-radius-outer":ye.BOX_BORDER_RADIUS_TO_CSS_VAR[m]}:q,[m,q]),y=d.useCallback(e=>{if(!e||!(e instanceof Element))return!1;const $=e.closest(ge);if(!$)return!1;const n=e.closest(`.${t.styles[u]}`);return $!==n},[]),D=a==null?void 0:a.readOnly,ae=d.useCallback(e=>{if(s||D)return;if(y(e.target)){if(r&&_==="a"){const n=e.target,R=n==null?void 0:n.closest('a, [role="link"]');(!R||R===e.currentTarget)&&e.preventDefault()}return}if(r&&(i==null||i(e)),l){if(!p)return;const n=e.target;if(n.tagName==="INPUT"&&n.hasAttribute("data-card-input"))return;I.current&&I.current.click()}},[r,l,p,y,_,i,s,D]),re=d.useCallback(e=>{s||e.key!=="Enter"&&e.key!==" "||y(e.target)||(e.preventDefault(),r&&(i==null||i(e)))},[r,y,i,s]),se=T(t.styles[u],!E&&t.styles[`${u}--default-background`],!B&&t.styles[`${u}--default-shadow`],!N&&t.styles[`${u}--default-border`],x&&t.styles[`${c}interactive`],r&&t.styles[`${c}clickable`],l&&t.styles[`${c}selectable`],l&&h&&t.styles[`${c}selected`],s&&t.styles[`${c}disabled`],g&&t.styles[`${c}density-${g}`],k),ie=fe.useInteractiveProps({isInteractive:x,disabled:s,isClickable:r,elementType:_,href:r?M:void 0,target:r?A:void 0,rel:r?H:void 0,onClick:ae,onKeyDown:re}),le=()=>!l||!p?null:C.jsx("input",{ref:I,type:w,className:t.styles[`${b}hidden-input`],checked:h,disabled:s,name:Z,value:Y,onChange:Q,"aria-label":f["aria-label"],"aria-labelledby":f["aria-labelledby"],"aria-invalid":(a==null?void 0:a.isInvalid)||void 0,"aria-errormessage":a==null?void 0:a.validationErrorsId,"data-card-input":""}),ne=()=>{if(!l||!ee)return null;const e=T(t.styles[`${b}selection-indicator`],t.styles[`${b}selection-indicator--${w}`],h&&t.styles[`${b}selection-indicator--checked`],s&&t.styles[`${b}selection-indicator--disabled`]);return C.jsx("span",{className:e,"aria-hidden":"true"})},{"aria-label":oe,"aria-labelledby":de,...ce}=f;return C.jsxs(be.Box,{as:_,className:se,borderColor:N,borderWidth:"md",backgroundColor:E,shadow:B,style:te,...ie,...ce,"aria-label":l?void 0:oe,"aria-labelledby":l?void 0:de,children:[le(),ne(),x&&!s&&C.jsx($e.StateLayer,{}),P]})};o.displayName="Card";o.MediaAbove=Ce.MediaAbove;o.MediaBelow=qe.MediaBelow;o.Header=me.Header;o.Body=ve.Body;o.Content=xe.Content;o.Footer=he.Footer;exports.Card=o;

package/lib/Card/Card.es.js

@@ -1,197 +1,203 @@
-import { jsxs as le, jsx as E } from "react/jsx-runtime";
-import { useRef as ne, useMemo as de, useCallback as g } from "react";
-import R from "clsx";
-import { g as ce } from "../../chunks/classNames.BTJmrO_L.js";
+import { jsxs as me, jsx as x } from "react/jsx-runtime";
+import fe, { useRef as ue, useMemo as be, useCallback as E } from "react";
+import P from "clsx";
+import { g as pe } from "../../chunks/classNames.BTJmrO_L.js";
 import "../../chunks/constants.CKKGf1-i.js";
-import { Box as ue } from "../Box/Box.es.js";
+import { Box as he } from "../Box/Box.es.js";
 import "../../chunks/CSSLookup.DOOy1rxJ.js";
 import "../../utils/hooks/useId.es.js";
-import { useInteractiveProps as me } from "../../utils/hooks/useInteractiveProps.es.js";
+import { useInteractiveProps as ve } from "../../utils/hooks/useInteractiveProps.es.js";
 import { s as t } from "../../chunks/card.module.ByBYpexJ.js";
-import { BOX_BORDER_RADIUS_TO_CSS_VAR as fe } from "../Box/utils.es.js";
-import { MediaAbove as be } from "./Card.MediaAbove.es.js";
-import { Header as pe } from "./Card.Header.es.js";
-import { MediaBelow as he } from "./Card.MediaBelow.es.js";
-import { Body as ye } from "./Card.Body.es.js";
-import { Content as $e } from "./Card.Content.es.js";
-import { Footer as Ie } from "./Card.Footer.es.js";
-import { useCardGroupContext as ve } from "./CardContext.es.js";
-import { useCardGroup as Ne } from "./useCardGroup.es.js";
-import { StateLayer as Ce } from "../StateLayer/StateLayer.es.js";
-const { baseClassNamePrefix: d, classModifierPrefix: n, subElementClassPrefix: c } = ce("card"), Ee = 'button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])', l = ({
+import { F as ye } from "../../chunks/form.context.BhylRiG2.js";
+import "../Form/contexts/label.context.es.js";
+import "../Form/contexts/helperText.context.es.js";
+import { BOX_BORDER_RADIUS_TO_CSS_VAR as Ie } from "../Box/utils.es.js";
+import { MediaAbove as $e } from "./Card.MediaAbove.es.js";
+import { Header as Ce } from "./Card.Header.es.js";
+import { MediaBelow as ge } from "./Card.MediaBelow.es.js";
+import { Body as xe } from "./Card.Body.es.js";
+import { Content as Ee } from "./Card.Content.es.js";
+import { Footer as Ne } from "./Card.Footer.es.js";
+import { useCardGroupContext as De } from "./CardContext.es.js";
+import { useCardGroup as we } from "./useCardGroup.es.js";
+import { StateLayer as Se } from "../StateLayer/StateLayer.es.js";
+const { baseClassNamePrefix: c, classModifierPrefix: d, subElementClassPrefix: m } = pe("card"), _e = 'button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])', n = ({
   children: T,
   className: A,
-  density: x = "md",
-  borderColor: w,
-  borderRadius: b,
-  backgroundColor: S,
-  shadow: B,
-  type: D,
+  density: N = "md",
+  borderColor: D,
+  borderRadius: p,
+  backgroundColor: w,
+  shadow: S,
+  type: _,
   as: L,
   disabled: k = !1,
-  href: M,
-  target: O,
-  rel: G,
-  onClick: i,
-  selectionMode: H = "single",
-  showIndicator: V = !1,
-  selected: j,
-  defaultSelected: F = !1,
-  onSelect: K,
-  name: U,
-  value: W,
-  style: p,
-  ...u
+  href: B,
+  target: F,
+  rel: H,
+  onClick: s,
+  selectionMode: V = "single",
+  showIndicator: j = !1,
+  selected: K,
+  defaultSelected: U = !1,
+  onSelect: W,
+  name: X,
+  value: q,
+  style: h,
+  ...f
 }) => {
-  const h = ve();
-  process.env.NODE_ENV !== "production" && h && D === "clickable" && console.warn(
+  const a = De(), z = !!a, { ctxDisabled: J } = fe.useContext(ye), Q = k || (z ? !1 : J);
+  process.env.NODE_ENV !== "production" && a && _ === "clickable" && console.warn(
     'Card: type="clickable" is ignored when Card is inside a CardGroup; treating as selectable instead.'
   );
-  const y = h ? "selectable" : D, $ = !!y, r = y === "clickable", o = y === "selectable", {
+  const v = a ? "selectable" : _, y = !!v, r = v === "clickable", o = v === "selectable", {
     selected: I,
-    handleChange: X,
-    resolvedValue: q,
-    isSelectionEligible: v,
-    resolvedDisabled: a,
-    resolvedName: z,
-    resolvedShowIndicator: J,
-    inputType: _
-  } = Ne({
-    cardGroup: h,
-    selected: j,
-    defaultSelected: F,
-    value: W,
-    id: u.id,
-    disabled: k,
-    name: U,
-    selectionMode: H,
-    showIndicator: V,
-    onSelect: K
-  }), N = ne(null), m = L ?? (r && M ? "a" : "div"), Q = de(() => b ? {
-    ...p,
-    "--bm-card-radius-outer": fe[b]
-  } : p, [b, p]), f = g(
+    handleChange: Y,
+    resolvedValue: Z,
+    isSelectionEligible: $,
+    resolvedDisabled: i,
+    resolvedName: G,
+    resolvedShowIndicator: ee,
+    inputType: M
+  } = we({
+    cardGroup: a,
+    selected: K,
+    defaultSelected: U,
+    value: q,
+    id: f.id,
+    disabled: Q,
+    name: X,
+    selectionMode: V,
+    showIndicator: j,
+    onSelect: W
+  }), C = ue(null), u = L ?? (r && B ? "a" : "div"), te = be(() => p ? {
+    ...h,
+    "--bm-card-radius-outer": Ie[p]
+  } : h, [p, h]), b = E(
     (e) => {
       if (!e || !(e instanceof Element)) return !1;
-      const C = e.closest(Ee);
-      if (!C) return !1;
-      const s = e.closest(`.${t[d]}`);
-      return C !== s;
+      const g = e.closest(_e);
+      if (!g) return !1;
+      const l = e.closest(`.${t[c]}`);
+      return g !== l;
     },
     []
-  ), Y = g(
+  ), R = a == null ? void 0 : a.readOnly, ae = E(
     (e) => {
-      if (a) return;
-      if (f(e.target)) {
-        if (r && m === "a") {
-          const s = e.target, P = s == null ? void 0 : s.closest('a, [role="link"]');
-          (!P || P === e.currentTarget) && e.preventDefault();
+      if (i || R) return;
+      if (b(e.target)) {
+        if (r && u === "a") {
+          const l = e.target, O = l == null ? void 0 : l.closest('a, [role="link"]');
+          (!O || O === e.currentTarget) && e.preventDefault();
         }
         return;
       }
-      if (r && (i == null || i(e)), o) {
-        if (!v) return;
-        const s = e.target;
-        if (s.tagName === "INPUT" && s.hasAttribute("data-card-input"))
+      if (r && (s == null || s(e)), o) {
+        if (!$) return;
+        const l = e.target;
+        if (l.tagName === "INPUT" && l.hasAttribute("data-card-input"))
           return;
-        N.current && N.current.click();
+        C.current && C.current.click();
       }
     },
     [
       r,
       o,
-      v,
-      f,
-      m,
+      $,
+      b,
+      u,
+      s,
       i,
-      a
+      R
     ]
-  ), Z = g(
+  ), re = E(
     (e) => {
-      a || e.key !== "Enter" && e.key !== " " || f(e.target) || (e.preventDefault(), r && (i == null || i(e)));
+      i || e.key !== "Enter" && e.key !== " " || b(e.target) || (e.preventDefault(), r && (s == null || s(e)));
     },
-    [r, f, i, a]
-  ), ee = R(
-    t[d],
-    !S && t[`${d}--default-background`],
-    !B && t[`${d}--default-shadow`],
-    !w && t[`${d}--default-border`],
-    $ && t[`${n}interactive`],
-    r && t[`${n}clickable`],
-    o && t[`${n}selectable`],
-    o && I && t[`${n}selected`],
-    a && t[`${n}disabled`],
-    x && t[`${n}density-${x}`],
+    [r, b, s, i]
+  ), ie = P(
+    t[c],
+    !w && t[`${c}--default-background`],
+    !S && t[`${c}--default-shadow`],
+    !D && t[`${c}--default-border`],
+    y && t[`${d}interactive`],
+    r && t[`${d}clickable`],
+    o && t[`${d}selectable`],
+    o && I && t[`${d}selected`],
+    i && t[`${d}disabled`],
+    N && t[`${d}density-${N}`],
     A
-  ), te = me({
-    isInteractive: $,
-    disabled: a,
+  ), se = ve({
+    isInteractive: y,
+    disabled: i,
     isClickable: r,
-    elementType: m,
-    href: r ? M : void 0,
-    target: r ? O : void 0,
-    rel: r ? G : void 0,
-    onClick: Y,
-    onKeyDown: Z
-  }), re = () => !o || !v ? null : /* @__PURE__ */ E(
+    elementType: u,
+    href: r ? B : void 0,
+    target: r ? F : void 0,
+    rel: r ? H : void 0,
+    onClick: ae,
+    onKeyDown: re
+  }), oe = () => !o || !$ ? null : /* @__PURE__ */ x(
     "input",
     {
-      ref: N,
-      type: _,
-      className: t[`${c}hidden-input`],
+      ref: C,
+      type: M,
+      className: t[`${m}hidden-input`],
       checked: I,
-      disabled: a,
-      name: z,
-      value: q,
-      onChange: X,
-      "aria-label": u["aria-label"],
-      "aria-labelledby": u["aria-labelledby"],
+      disabled: i,
+      name: G,
+      value: Z,
+      onChange: Y,
+      "aria-label": f["aria-label"],
+      "aria-labelledby": f["aria-labelledby"],
+      "aria-invalid": (a == null ? void 0 : a.isInvalid) || void 0,
+      "aria-errormessage": a == null ? void 0 : a.validationErrorsId,
       "data-card-input": ""
     }
-  ), ae = () => {
-    if (!o || !J) return null;
-    const e = R(
-      t[`${c}selection-indicator`],
-      t[`${c}selection-indicator--${_}`],
-      I && t[`${c}selection-indicator--checked`],
-      a && t[`${c}selection-indicator--disabled`]
+  ), le = () => {
+    if (!o || !ee) return null;
+    const e = P(
+      t[`${m}selection-indicator`],
+      t[`${m}selection-indicator--${M}`],
+      I && t[`${m}selection-indicator--checked`],
+      i && t[`${m}selection-indicator--disabled`]
     );
-    return /* @__PURE__ */ E("span", { className: e, "aria-hidden": "true" });
+    return /* @__PURE__ */ x("span", { className: e, "aria-hidden": "true" });
   }, {
-    "aria-label": ie,
-    "aria-labelledby": oe,
-    ...se
-  } = u;
-  return /* @__PURE__ */ le(
-    ue,
+    "aria-label": ne,
+    "aria-labelledby": de,
+    ...ce
+  } = f;
+  return /* @__PURE__ */ me(
+    he,
     {
-      as: m,
-      className: ee,
-      borderColor: w,
+      as: u,
+      className: ie,
+      borderColor: D,
       borderWidth: "md",
-      backgroundColor: S,
-      shadow: B,
-      style: Q,
-      ...te,
+      backgroundColor: w,
+      shadow: S,
+      style: te,
       ...se,
-      "aria-label": o ? void 0 : ie,
-      "aria-labelledby": o ? void 0 : oe,
+      ...ce,
+      "aria-label": o ? void 0 : ne,
+      "aria-labelledby": o ? void 0 : de,
       children: [
-        re(),
-        ae(),
-        $ && !a && /* @__PURE__ */ E(Ce, {}),
+        oe(),
+        le(),
+        y && !i && /* @__PURE__ */ x(Se, {}),
         T
       ]
     }
   );
 };
-l.displayName = "Card";
-l.MediaAbove = be;
-l.MediaBelow = he;
-l.Header = pe;
-l.Body = ye;
-l.Content = $e;
-l.Footer = Ie;
+n.displayName = "Card";
+n.MediaAbove = $e;
+n.MediaBelow = ge;
+n.Header = Ce;
+n.Body = xe;
+n.Content = Ee;
+n.Footer = Ne;
 export {
-  l as Card
+  n as Card
 };

package/lib/Card/CardContext.d.ts

@@ -5,8 +5,12 @@ export interface CardGroupContextValue {
     showIndicator?: boolean;
     name?: string;
     disabled?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
     value?: string | string[];
     onItemSelect?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    validationErrorsId?: string;
+    isInvalid?: boolean;
 }
 export declare const CardGroupProvider: ({ children, value, }: {
     children: React.ReactNode;

package/lib/Card/CardGroup.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("react"),f=require("clsx"),h=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const G=require("../../chunks/card.module.8KnCe1uR.js");require("../../chunks/CSSLookup.DESAWWRT.js");const I=require("../../utils/hooks/useId.cjs.js"),M=require("./CardContext.cjs.js"),V=require("./useCardGroupValue.cjs.js"),{classModifierPrefix:j}=h.getBEMClassNames("card"),i=u=>{const{children:d,className:c,disabled:e=!1,selectionMode:a="single",showIndicator:r=!1,name:n,value:m,defaultValue:b,onChange:C,"aria-label":p,"aria-labelledby":q,...g}=u,v=I.useId(),s=n??v,{currentValue:l,handleItemSelect:o}=V.useCardGroupValue({value:m,defaultValue:b,selectionMode:a,onChange:C}),N=f(e&&G.styles[`${j}disabled`],c),_=a==="single"?"radiogroup":"group",x=y.useMemo(()=>({selectionMode:a,showIndicator:r,name:s,disabled:e,value:l,onItemSelect:o}),[a,r,s,e,l,o]);return t.jsx("div",{role:_,"aria-disabled":e||void 0,"aria-label":p,"aria-labelledby":q,className:N,...g,children:t.jsx(M.CardGroupProvider,{value:x,children:d})})};i.displayName="CardGroup";exports.CardGroup=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),u=require("react"),E=require("../../utils/functions.cjs.js"),k=require("clsx"),F=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const T=require("../../chunks/card.module.8KnCe1uR.js");require("../../chunks/CSSLookup.DESAWWRT.js");const A=require("../../utils/hooks/useId.cjs.js"),B=require("../Form/hooks/useAccessibleId.hook.cjs.js"),H=require("../../chunks/form.context.B26th8Od.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const L=require("./CardContext.cjs.js"),$=require("./useCardGroupValue.cjs.js"),{classModifierPrefix:z}=F.getBEMClassNames("card"),q=u.forwardRef((v,_)=>{const{children:f,className:p,disabled:y=!1,required:C=!1,readOnly:g=!1,validationRules:h=[],selectionMode:e="single",showIndicator:n=!1,name:I,value:x,defaultValue:N,onChange:R,"aria-label":G,"aria-labelledby":P,...M}=v,O=A.useId(),{id:r}=B.useAccessibleId(),o=I??O,{showErrors:S,isInvalid:i,errorShown:l,disabled:a,readOnly:s,required:d}=H.useFormField({name:o,validationRules:h,disabledProp:y,readOnlyProp:g,requiredProp:C}),t=u.useRef(null),{currentValue:c,handleItemSelect:b}=$.useCardGroupValue({value:x,defaultValue:N,selectionMode:e,onChange:R,rootRef:t}),V=k(a&&T.styles[`${z}disabled`],p),j=e==="single"?"radiogroup":"group",w=u.useMemo(()=>({selectionMode:e,showIndicator:n,name:o,disabled:a,required:d,readOnly:s,value:c,onItemSelect:b,validationErrorsId:l?r:void 0,isInvalid:i}),[e,n,o,a,d,s,c,b,l,r,i]);return m.jsxs("div",{ref:E.mergeRefs(t,_),role:j,"aria-disabled":a||s||void 0,"aria-readonly":s||void 0,"aria-required":d||void 0,"aria-invalid":i||void 0,"aria-errormessage":l?r:void 0,"aria-label":G,"aria-labelledby":P,className:V,...M,children:[m.jsx(L.CardGroupProvider,{value:w,children:f}),S(r)]})});q.displayName="CardGroup";exports.CardGroup=q;

package/lib/Card/CardGroup.d.ts

@@ -1,10 +1,11 @@
-import { default as React } from 'react';
+import { default as React, ComponentPropsWithoutRef } from 'react';
 import { CardGroupSelectionMode } from '@viasat/beam-shared/components/card';
-export type CardGroupProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> & {
+import { FormValidator } from '@viasat/beam-shared/components/form';
+export interface CardGroupProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
     /**
      * The Cards that belong to this CardGroup
      */
-    children?: React.ReactNode;
+    'children'?: React.ReactNode;
     /**
      * Accessible group label
      */
@@ -48,8 +49,19 @@ export type CardGroupProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChan
      * Callback invoked when the group selection changes
      */
     'onChange'?: (value: string | string[] | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
-};
-export declare const CardGroup: {
-    (props: CardGroupProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+    /**
+     * Specify if the group is a required field
+     * @default false
+     */
+    'required'?: boolean;
+    /**
+     * Specify if the group displays in a read-only state
+     * @default false
+     */
+    'readOnly'?: boolean;
+    /**
+     * Specify form validation rules for the group
+     */
+    'validationRules'?: FormValidator[];
+}
+export declare const CardGroup: React.ForwardRefExoticComponent<CardGroupProps & React.RefAttributes<HTMLDivElement>>;

package/lib/Card/CardGroup.es.js

@@ -1,67 +1,99 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useMemo as x } from "react";
-import y from "clsx";
-import { g as G } from "../../chunks/classNames.BTJmrO_L.js";
+import { jsxs as O, jsx as V } from "react/jsx-runtime";
+import S, { forwardRef as j, useMemo as B } from "react";
+import { mergeRefs as F } from "../../utils/functions.es.js";
+import L from "clsx";
+import { g as A } from "../../chunks/classNames.BTJmrO_L.js";
 import "../../chunks/constants.CKKGf1-i.js";
-import { s as I } from "../../chunks/card.module.ByBYpexJ.js";
+import { s as $ } from "../../chunks/card.module.ByBYpexJ.js";
 import "../../chunks/CSSLookup.DOOy1rxJ.js";
-import { useId as M } from "../../utils/hooks/useId.es.js";
-import { CardGroupProvider as V } from "./CardContext.es.js";
-import { useCardGroupValue as B } from "./useCardGroupValue.es.js";
-const { classModifierPrefix: L } = G("card"), P = (i) => {
+import { useId as k } from "../../utils/hooks/useId.es.js";
+import { useAccessibleId as z } from "../Form/hooks/useAccessibleId.hook.es.js";
+import { b as D } from "../../chunks/form.context.BhylRiG2.js";
+import "../Form/contexts/label.context.es.js";
+import "../Form/contexts/helperText.context.es.js";
+import { CardGroupProvider as H } from "./CardContext.es.js";
+import { useCardGroupValue as J } from "./useCardGroupValue.es.js";
+const { classModifierPrefix: K } = A("card"), Q = j((c, p) => {
   const {
-    children: m,
-    className: d,
-    disabled: e = !1,
-    selectionMode: a = "single",
-    showIndicator: r = !1,
-    name: n,
-    value: c,
-    defaultValue: u,
-    onChange: p,
-    "aria-label": f,
-    "aria-labelledby": b,
-    ...g
-  } = i, v = M(), o = n ?? v, { currentValue: l, handleItemSelect: s } = B({
-    value: c,
-    defaultValue: u,
-    selectionMode: a,
-    onChange: p
-  }), N = y(
-    e && I[`${L}disabled`],
-    d
-  ), C = a === "single" ? "radiogroup" : "group", h = x(
+    children: f,
+    className: v,
+    disabled: b = !1,
+    required: y = !1,
+    readOnly: g = !1,
+    validationRules: I = [],
+    selectionMode: e = "single",
+    showIndicator: t = !1,
+    name: h,
+    value: N,
+    defaultValue: x,
+    onChange: C,
+    "aria-label": R,
+    "aria-labelledby": _,
+    ...q
+  } = c, P = k(), { id: r } = z(), i = h ?? P, { showErrors: w, isInvalid: s, errorShown: l, disabled: a, readOnly: o, required: d } = D({
+    name: i,
+    validationRules: I,
+    disabledProp: b,
+    readOnlyProp: g,
+    requiredProp: y
+  }), m = S.useRef(null), { currentValue: n, handleItemSelect: u } = J({
+    value: N,
+    defaultValue: x,
+    selectionMode: e,
+    onChange: C,
+    rootRef: m
+  }), E = L(
+    a && $[`${K}disabled`],
+    v
+  ), G = e === "single" ? "radiogroup" : "group", M = B(
     () => ({
-      selectionMode: a,
-      showIndicator: r,
-      name: o,
-      disabled: e,
-      value: l,
-      onItemSelect: s
+      selectionMode: e,
+      showIndicator: t,
+      name: i,
+      disabled: a,
+      required: d,
+      readOnly: o,
+      value: n,
+      onItemSelect: u,
+      validationErrorsId: l ? r : void 0,
+      isInvalid: s
     }),
     [
+      e,
+      t,
+      i,
       a,
-      r,
+      d,
       o,
-      e,
+      n,
+      u,
       l,
+      r,
       s
     ]
   );
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ O(
     "div",
     {
-      role: C,
-      "aria-disabled": e || void 0,
-      "aria-label": f,
-      "aria-labelledby": b,
-      className: N,
-      ...g,
-      children: /* @__PURE__ */ t(V, { value: h, children: m })
+      ref: F(m, p),
+      role: G,
+      "aria-disabled": a || o || void 0,
+      "aria-readonly": o || void 0,
+      "aria-required": d || void 0,
+      "aria-invalid": s || void 0,
+      "aria-errormessage": l ? r : void 0,
+      "aria-label": R,
+      "aria-labelledby": _,
+      className: E,
+      ...q,
+      children: [
+        /* @__PURE__ */ V(H, { value: M, children: f }),
+        w(r)
+      ]
     }
   );
-};
-P.displayName = "CardGroup";
+});
+Q.displayName = "CardGroup";
 export {
-  P as CardGroup
+  Q as CardGroup
 };

package/lib/Card/useCardGroup.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),k=require("./card.utils.cjs.js");function q({cardGroup:e,selected:C,defaultSelected:S,value:b,id:m,disabled:I,name:y,selectionMode:M,showIndicator:a,onSelect:n}){const t=!!e,s=b??m,o=!t||!!s;l.useEffect(()=>{process.env.NODE_ENV!=="production"&&t&&!s&&console.warn("Card: A Card inside a CardGroup is missing a `value` or `id` prop. It will not participate in group selection.")},[]);const f=I||(e==null?void 0:e.disabled)||!1,c=(e==null?void 0:e.name)??y,h=(e==null?void 0:e.showIndicator)??a,w=(e==null?void 0:e.selectionMode)??M??"single",E=k.getInputType(w),[_,A]=l.useState(()=>t?!1:S),N=C!==void 0?C:_,i=e==null?void 0:e.value,v=(e==null?void 0:e.selectionMode)??"single",T=l.useMemo(()=>!t||!s?null:v==="single"?i===s:Array.isArray(i)?i.includes(s):!1,[i,v,t,s]),V=t?T??!1:N,d=l.useCallback(g=>{f||!o||(e!=null&&e.onItemSelect&&s?e.onItemSelect(s,g):A(g.target.checked),n==null||n(g))},[f,o,e,s,n]);return{selected:V,handleChange:d,resolvedValue:s,isSelectionEligible:o,resolvedDisabled:f,resolvedName:c,resolvedShowIndicator:h,inputType:E}}exports.useCardGroup=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),D=require("./card.utils.cjs.js");function a({cardGroup:e,selected:C,defaultSelected:S,value:b,id:m,disabled:y,name:I,selectionMode:M,showIndicator:h,onSelect:n}){const t=!!e,s=b??m,o=!t||!!s;i.useEffect(()=>{process.env.NODE_ENV!=="production"&&t&&!s&&console.warn("Card: A Card inside a CardGroup is missing a `value` or `id` prop. It will not participate in group selection.")},[]);const f=y||(e==null?void 0:e.disabled)||!1,w=(e==null?void 0:e.name)??I,E=(e==null?void 0:e.showIndicator)??h,_=(e==null?void 0:e.selectionMode)??M??"single",A=D.getInputType(_),[N,O]=i.useState(()=>t?!1:S),T=C!==void 0?C:N,l=e==null?void 0:e.value,v=(e==null?void 0:e.selectionMode)??"single",V=i.useMemo(()=>!t||!s?null:v==="single"?l===s:Array.isArray(l)?l.includes(s):!1,[l,v,t,s]),k=t?V??!1:T,q=i.useCallback(g=>{f||e!=null&&e.readOnly||!o||(e!=null&&e.onItemSelect&&s?e.onItemSelect(s,g):O(g.target.checked),n==null||n(g))},[f,o,e,s,n]);return{selected:k,handleChange:q,resolvedValue:s,isSelectionEligible:o,resolvedDisabled:f,resolvedName:w,resolvedShowIndicator:E,inputType:A}}exports.useCardGroup=a;

package/lib/Card/useCardGroup.es.js

@@ -1,4 +1,4 @@
-import { useEffect as O, useState as _, useMemo as j, useCallback as q } from "react";
+import { useEffect as x, useState as _, useMemo as j, useCallback as q } from "react";
 import { getInputType as z } from "./card.utils.es.js";
 function J({
   cardGroup: e,
@@ -8,32 +8,32 @@ function J({
   id: I,
   disabled: S,
   name: h,
-  selectionMode: M,
-  showIndicator: b,
+  selectionMode: y,
+  showIndicator: M,
   onSelect: n
 }) {
-  const t = !!e, s = v ?? I, l = !t || !!s;
-  O(() => {
+  const t = !!e, s = v ?? I, i = !t || !!s;
+  x(() => {
     process.env.NODE_ENV !== "production" && t && !s && console.warn(
       "Card: A Card inside a CardGroup is missing a `value` or `id` prop. It will not participate in group selection."
     );
   }, []);
-  const o = S || (e == null ? void 0 : e.disabled) || !1, w = (e == null ? void 0 : e.name) ?? h, y = (e == null ? void 0 : e.showIndicator) ?? b, E = (e == null ? void 0 : e.selectionMode) ?? M ?? "single", A = z(E), [N, V] = _(
+  const f = S || (e == null ? void 0 : e.disabled) || !1, b = (e == null ? void 0 : e.name) ?? h, w = (e == null ? void 0 : e.showIndicator) ?? M, E = (e == null ? void 0 : e.selectionMode) ?? y ?? "single", A = z(E), [N, V] = _(
     () => t ? !1 : C
-  ), k = g !== void 0 ? g : N, i = e == null ? void 0 : e.value, m = (e == null ? void 0 : e.selectionMode) ?? "single", D = j(() => !t || !s ? null : m === "single" ? i === s : Array.isArray(i) ? i.includes(s) : !1, [i, m, t, s]), T = t ? D ?? !1 : k, x = q(
-    (f) => {
-      o || !l || (e != null && e.onItemSelect && s ? e.onItemSelect(s, f) : V(f.target.checked), n == null || n(f));
+  ), k = g !== void 0 ? g : N, l = e == null ? void 0 : e.value, m = (e == null ? void 0 : e.selectionMode) ?? "single", D = j(() => !t || !s ? null : m === "single" ? l === s : Array.isArray(l) ? l.includes(s) : !1, [l, m, t, s]), O = t ? D ?? !1 : k, T = q(
+    (o) => {
+      f || e != null && e.readOnly || !i || (e != null && e.onItemSelect && s ? e.onItemSelect(s, o) : V(o.target.checked), n == null || n(o));
     },
-    [o, l, e, s, n]
+    [f, i, e, s, n]
   );
   return {
-    selected: T,
-    handleChange: x,
+    selected: O,
+    handleChange: T,
     resolvedValue: s,
-    isSelectionEligible: l,
-    resolvedDisabled: o,
-    resolvedName: w,
-    resolvedShowIndicator: y,
+    isSelectionEligible: i,
+    resolvedDisabled: f,
+    resolvedName: b,
+    resolvedShowIndicator: w,
     inputType: A
   };
 }

package/lib/Card/useCardGroupValue.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("./card.utils.cjs.js");function b({value:o,defaultValue:n,selectionMode:t,onChange:r}){const u=o!==void 0,[d,y]=a.useState(()=>t==="single"?s.normalizeToSingle(n):s.normalizeToArray(n)),i=u?o:d,e=a.useMemo(()=>t==="single"?s.normalizeToSingle(i):s.normalizeToArray(i),[i,t]),f=a.useCallback((l,S)=>{if(t==="single"){u||y(l),r==null||r(l,S);return}const c=s.normalizeToArray(e),T=c.includes(l)?c.filter(z=>z!==l):[...c,l];u||y(T),r==null||r(T,S)},[t,e,u,r]);return{currentValue:e,handleItemSelect:f}}exports.useCardGroupValue=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),l=require("./card.utils.cjs.js");function A({value:f,defaultValue:m,selectionMode:u,onChange:e,rootRef:c}){const t=f!==void 0,y=i.useRef(u==="single"?l.normalizeToSingle(m):l.normalizeToArray(m)),[T,a]=i.useState(()=>y.current);i.useEffect(()=>{var s;if(t)return;const r=(s=c==null?void 0:c.current)==null?void 0:s.closest("form");if(!r)return;const n=()=>a(y.current);return r.addEventListener("reset",n),()=>r.removeEventListener("reset",n)},[t,c]);const o=t?f:T,d=i.useMemo(()=>u==="single"?l.normalizeToSingle(o):l.normalizeToArray(o),[o,u]),z=i.useCallback((r,n)=>{if(u==="single"){t||a(r),e==null||e(r,n);return}const s=l.normalizeToArray(d),S=s.includes(r)?s.filter(b=>b!==r):[...s,r];t||a(S),e==null||e(S,n)},[u,d,t,e]);return{currentValue:d,handleItemSelect:z}}exports.useCardGroupValue=A;

package/lib/Card/useCardGroupValue.d.ts

@@ -5,10 +5,11 @@ interface UseCardGroupValueParams {
     defaultValue: string | string[] | undefined;
     selectionMode: CardGroupSelectionMode;
     onChange?: (value: string | string[] | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+    rootRef?: React.RefObject<HTMLDivElement>;
 }
 interface UseCardGroupValueReturn {
     currentValue: string | string[] | undefined;
     handleItemSelect: (itemValue: string, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare function useCardGroupValue({ value, defaultValue, selectionMode, onChange, }: UseCardGroupValueParams): UseCardGroupValueReturn;
+export declare function useCardGroupValue({ value, defaultValue, selectionMode, onChange, rootRef, }: UseCardGroupValueParams): UseCardGroupValueReturn;
 export {};

package/lib/Card/useCardGroupValue.es.js

@@ -1,29 +1,41 @@
-import { useState as I, useMemo as T, useCallback as a } from "react";
-import { normalizeToSingle as x, normalizeToArray as f } from "./card.utils.es.js";
-function w({
-  value: m,
-  defaultValue: o,
-  selectionMode: t,
-  onChange: r
+import { useRef as z, useState as A, useEffect as I, useMemo as L, useCallback as T } from "react";
+import { normalizeToSingle as S, normalizeToArray as m } from "./card.utils.es.js";
+function k({
+  value: a,
+  defaultValue: p,
+  selectionMode: u,
+  onChange: t,
+  rootRef: n
 }) {
-  const l = m !== void 0, [y, p] = I(
-    () => t === "single" ? x(o) : f(o)
-  ), u = l ? m : y, c = T(
-    () => t === "single" ? x(u) : f(u),
-    [u, t]
-  ), z = a(
-    (s, n) => {
-      if (t === "single") {
-        l || p(s), r == null || r(s, n);
+  const s = a !== void 0, d = z(
+    u === "single" ? S(p) : m(p)
+  ), [v, i] = A(
+    () => d.current
+  );
+  I(() => {
+    var e;
+    if (s) return;
+    const r = (e = n == null ? void 0 : n.current) == null ? void 0 : e.closest("form");
+    if (!r) return;
+    const c = () => i(d.current);
+    return r.addEventListener("reset", c), () => r.removeEventListener("reset", c);
+  }, [s, n]);
+  const l = s ? a : v, f = L(
+    () => u === "single" ? S(l) : m(l),
+    [l, u]
+  ), x = T(
+    (r, c) => {
+      if (u === "single") {
+        s || i(r), t == null || t(r, c);
         return;
       }
-      const i = f(c), S = i.includes(s) ? i.filter((A) => A !== s) : [...i, s];
-      l || p(S), r == null || r(S, n);
+      const e = m(f), E = e.includes(r) ? e.filter((y) => y !== r) : [...e, r];
+      s || i(E), t == null || t(E, c);
     },
-    [t, c, l, r]
+    [u, f, s, t]
   );
-  return { currentValue: c, handleItemSelect: z };
+  return { currentValue: f, handleItemSelect: x };
 }
 export {
-  w as useCardGroupValue
+  k as useCardGroupValue
 };

package/package.json

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