@viasat/beam-react 2.0.0

package/lib/ActionList/ActionListSelectionContext.es.js

@@ -0,0 +1,81 @@
+import { jsx as A } from "react/jsx-runtime";
+import { createContext as O, useMemo as y, useContext as P, useCallback as R, useRef as a, useEffect as h, useLayoutEffect as f, useReducer as j } from "react";
+const p = Symbol("all"), w = O({
+  selectionState: { emit: !1 },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  dispatch: () => {
+  }
+}), M = (t, r) => {
+  var u;
+  const { type: l, id: e, ...o } = r, c = ((u = t[e]) == null ? void 0 : u.multiple) ?? !1;
+  switch (l) {
+    case "unset": {
+      const n = {
+        ...t,
+        emit: !1
+      };
+      return delete n[e], n;
+    }
+    case "set":
+      return {
+        ...t,
+        [e]: {
+          ...t[e],
+          ...o
+        },
+        emit: !1
+      };
+    case "select":
+      return Object.getOwnPropertySymbols(t).reduce(
+        (n, s) => (n[s] = {
+          ...t[s],
+          selected: c ? s === e || e === p ? !0 : t[s].selected : s === e
+        }, n),
+        { emit: !0 }
+      );
+    case "deselect":
+      return Object.getOwnPropertySymbols(t).reduce(
+        (n, s) => (n[s] = {
+          ...t[s],
+          selected: c ? s === e || e === p ? !1 : t[s].selected : s === e
+        }, n),
+        { emit: !0 }
+      );
+    default:
+      return t;
+  }
+}, I = ({
+  children: t,
+  kind: r
+}) => {
+  const [l, e] = j(M, { emit: !1 }), o = y(() => ({ selectionState: l, dispatch: e }), [l]), c = a(r);
+  return f(() => {
+    c.current && c.current !== r && e({ type: "deselect", id: p }), c.current = r;
+  }, [r]), /* @__PURE__ */ A(w.Provider, { value: o, children: t });
+}, q = (t, r, l) => {
+  const e = y(() => Symbol(), []), { selectionState: o, dispatch: c } = P(w), { emit: u, [e]: n } = o, { selected: s = !1 } = n ?? {}, b = t === "checkbox" || t === "multiCheckMark" || t === "switch", x = R(
+    (m) => {
+      c(m ? { type: "select", id: e } : { type: "deselect", id: e });
+    },
+    [c, e]
+  ), i = a(l);
+  i.current = l;
+  const d = a(r);
+  return h(() => {
+    var m;
+    if (u) {
+      const L = d.current;
+      d.current = s, L !== s && ((m = i.current) == null || m.call(i, s));
+    }
+  }, [s, u]), f(() => {
+    r !== void 0 && (c({ type: "set", id: e, selected: r }), d.current = r);
+  }, [r, c, e]), f(() => {
+    c({ type: "set", id: e, onChange: l, multiple: b });
+  }, [c, e, l, b]), f(() => () => {
+    c({ type: "unset", id: e });
+  }, [c, e]), { selected: s, setSelected: x };
+};
+export {
+  I as ActionListSelectionProvider,
+  q as useActionListItemSelection
+};

package/lib/ActionList/index.cjs.js

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

package/lib/ActionList/index.d.ts

@@ -0,0 +1 @@
+export * from './ActionList';

package/lib/ActionList/index.es.js

@@ -0,0 +1,4 @@
+import { ActionList as i } from "./ActionList.es.js";
+export {
+  i as ActionList
+};

package/lib/ActionList/useActionListChildren.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");require("../../chunks/ActionList.Item.D7Rg5iMb.js");require("../../utils/functions.cjs.js");const e=require("../../chunks/ActionList.Group.Bv9vgU22.js");require("./ActionList.context.cjs.js");exports.useActionListChildren=e.useActionListChildren;

package/lib/ActionList/useActionListChildren.d.ts

@@ -0,0 +1,13 @@
+import { ActionListItemProps } from './ActionList.Item';
+import { ActionListItemKind } from '@viasat/beam-shared/components/actionList';
+interface UseActionListChildrenOptions {
+    children: React.ReactNode;
+    disabled?: boolean;
+    allowGroups?: boolean;
+    kind?: ActionListItemKind;
+}
+export declare const useActionListChildren: ({ children: _children, disabled, allowGroups, kind, }: UseActionListChildrenOptions) => {
+    children: import('react').ReactElement<ActionListItemProps, string | import('react').JSXElementConstructor<any>>[];
+    hasChoiceItems: boolean;
+};
+export {};

package/lib/ActionList/useActionListChildren.es.js

@@ -0,0 +1,8 @@
+import "react";
+import "../../chunks/ActionList.Item.Dg_KHGsm.js";
+import "../../utils/functions.es.js";
+import { u as e } from "../../chunks/ActionList.Group.DuNxYNZQ.js";
+import "./ActionList.context.es.js";
+export {
+  e as useActionListChildren
+};

package/lib/Alert/Alert.cjs.js

@@ -0,0 +1 @@
+var be=require("../../assets/Alert.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),P=require("clsx"),a=require("react"),F=require("../../chunks/constants.hwjHOsvT.js"),Z=require("../../chunks/CSSLookup.DESAWWRT.js"),z=require("../../chunks/classNames.DAeKwerT.js"),ee=require("../../chunks/helpers.COm6C5Gf.js"),te=require("../../chunks/CheckCircleOutline.iRHrT_Eb.js"),k=require("../../chunks/InfoOutline.Gr8gkm5N.js"),ne=require("../../chunks/WarningOutlined.BPePPeyt.js"),re=require("../../utils/hooks/index.cjs.js"),ae=require("../CloseButton/CloseButton.cjs.js"),oe=o=>{const s=o==="sm"?2.625:3.125;return Z.convertRemToPixels(s)},b={positive:"Success",warning:"Warning",negative:"Error",infoPrimary:"Information",infoSecondary:"Information"},le="Dismiss Alert",n={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-alert":"bm-alert","bm-alert__content__wrapper":"bm-alert__content__wrapper","bm-alert__content":"bm-alert__content","bm-alert__content__heading":"bm-alert__content__heading","bm-alert__actions":"bm-alert__actions","bm-alert__icon":"bm-alert__icon","bm-alert__icon--wrapping":"bm-alert__icon--wrapping","bm-alert__close-button":"bm-alert__close-button","bm-alert__close-button--wrapping":"bm-alert__close-button--wrapping","bm-alert--full-width":"bm-alert--full-width","bm-alert--md":"bm-alert--md","bm-alert--positive":"bm-alert--positive","bm-alert--warning":"bm-alert--warning","bm-alert--negative":"bm-alert--negative","bm-alert--infoPrimary":"bm-alert--infoPrimary","bm-alert--infoSecondary":"bm-alert--infoSecondary","bm-alert--no-box":"bm-alert--no-box"},{baseClassNamePrefix:se,subElementClassPrefix:l,classModifierPrefix:q}=z.getBEMClassNames("alert"),ie=a.memo(({appearance:o,hideIcon:c,icon:f,isContentWrapping:s})=>{const d=n[`${l}icon`],x=n[`${l}icon--wrapping`],i=P(d,s&&x);if(c)return null;const w={positive:e.jsx(te.SvgCheckCircleOutline,{role:"img","aria-label":b.positive}),warning:e.jsx(ne.SvgWarningOutlined,{role:"img","aria-label":b.warning}),negative:e.jsx(k.SvgInfoOutline,{role:"img","aria-label":b.negative}),infoPrimary:e.jsx(k.SvgInfoOutline,{role:"img","aria-label":b.infoPrimary}),infoSecondary:e.jsx(k.SvgInfoOutline,{role:"img","aria-label":b.infoSecondary})};return e.jsx("span",{className:i,children:f||w[o]})});function ce({heading:o,body:c,children:f,actions:s,theme:d,icon:x,size:i="sm",fullWidth:w=!1,appearance:C="infoPrimary",className:T,hidden:R=!1,hideIcon:K=!1,dismissible:m=!1,disableAutoFocus:S=!1,disableCloseOnEscape:A=!1,role:E,id:D,onDismiss:g,...G}){const _=c||f,p=E==="alertdialog"||!!(!S&&(s||m)),B=p?"alertdialog":E,[u,J]=a.useState(R),[O,Q]=a.useState(!1),j=a.useRef(null),W=a.useRef(null),I=a.useCallback(t=>{const{current:r}=W;g==null||g(t),J(!0),r&&r.focus()},[g]),U=()=>{const{current:t}=L;if(t){const{offsetHeight:r}=t,y=oe(i);Q(r>y)}},{ref:L}=re.useResizeObserver(U,F.FPS_60,[i]);a.useEffect(()=>{W.current=document.activeElement},[]),a.useEffect(()=>{const{current:t}=j;if(!t||!p||S||u)return;const r=ee.findFirstFocusableElement(t);r==null||r.focus()},[p,S,u]),a.useEffect(()=>{const{current:t}=j,r=y=>{const{key:Y}=y;Y==="Escape"&&I(y)};return t&&m&&!u&&!A&&t.addEventListener("keydown",r),()=>{t&&t.removeEventListener("keydown",r)}},[I,u,m,A]);const V=a.useMemo(()=>`bm-alert-${Math.random().toString(36).slice(2,9)}`,[]),$=D||V,H=o?`${$}-heading`:void 0,v=_?`${$}-body`:void 0;let h,M;const N=p||m;N&&o?h=H:N&&c&&(h=v),N&&c&&h!==v&&(M=v);const X=P(n[se],d&&F.themeClassName(d),C&&n[`${q}${C}`],i&&n[`${q}${i}`],w&&n[`${q}full-width`],T);return R||u?null:e.jsxs("div",{role:B,ref:j,className:X,...B==="alertdialog"?{"aria-modal":"false"}:{},"aria-labelledby":h,"aria-describedby":M,id:$,...G,children:[e.jsx(ie,{appearance:C,hideIcon:K,icon:x,isContentWrapping:O||!!(o&&_)}),e.jsxs("div",{className:n[`${l}content__wrapper`],ref:L,children:[e.jsxs("div",{className:n[`${l}content`],children:[o&&e.jsx("span",{id:H,className:n[`${l}content__heading`],children:o}),_&&e.jsx("span",{id:v,children:_})]}),s&&e.jsx("div",{className:n[`${l}actions`],children:s})]}),m&&e.jsx("span",{className:P(n[`${l}close-button`],O&&n[`${l}close-button--wrapping`]),children:e.jsx(ae.CloseButton,{size:i,onClick:I,"aria-label":le})})]})}exports.Alert=ce;

package/lib/Alert/Alert.d.ts

@@ -0,0 +1,171 @@
+import { default as React } from 'react';
+import { AlertAppearances, AlertRoles, AlertSizes } from '@viasat/beam-shared/components/alert';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+/**
+ * TODO:
+ * 0. Write a11y docs inside of the storybook and give an example for each
+ *    - Need to make sure we all agree with screen reader users not being able to tab to dismissible,
+ *      alerts, when we disable auto focus for them.
+ *        - They can close with esc if they want
+ *        - We can give teams a way to allow the focus of the button no matter what for a11y
+ * 0.5 Update last focus code to go back the previously focused element as the documents focus changes
+ * 1. Set up new SB infra and new CICD to test 3.0
+ * 2. Add spacing props
+ * 7. Add tests
+ * 3. Add accessibility testing via storybook, axe, or cypress
+ */
+/**
+ * # A11y things that a user must do:
+ * - role
+ *   - It defaults ot be an alert, but you can change it:
+ *      1. alert: used for urgent and important messages
+ *      2. status: used for less important messages same as aria-live="polite" role="log"
+ *        - Will read all the message in the area over as a new message comes in
+ *      3. log: used for less important messages same as aria-live="polite" role="status"
+ *        - Will read only the new message as it comes in
+ *        - The first 3 types attract the user’s attention without receiving focus to communicate the message.
+ *        - That includes a close button as well!
+ *      4. alertdialog: used when when the alert has actions or when the alert opens like a dialog/modal
+ * - arial-live: for alerts that appear dynamically, (like in response to a user action)
+ *   - polite: the screen reader will announce the message when the user is idle
+ *   - assertive: the screen reader will announce the message immediately
+ * - aria-labelledby: to associate the alert with the heading slot
+ * - aria-describedby: to associate the alert with the body slot
+ *
+ *
+ * # A11y things that we should do:
+ * - When an alert appears move the focus to that alert?
+ * - When an alert is closed, make sure the focus goes to the next focusable element
+ *   or make the focus got to the element that triggered the alert?
+ * - aria-labelledby: to associate the alert with the heading
+ * - aria-describedby: to associate the alert with the body
+ *
+ *
+ * # More things to test:
+ * - Test with various screen readers like JAWS, NVDA, VoiceOver (for macOS and iOS),
+ *   and TalkBack (for Android) and browsers to ensure the alerts are announced as expected.
+ * - Test with keyboard-only navigation to ensure the alerts are announced as expected.
+ *
+ * # Things to tell users in docs:
+ * - The 2 roles we support and why only these two roles are supported
+ * - The difference between the 2 roles
+ * - How you can use role status and role log to make the alert less intrusive
+ * - The difference between the 2 roles
+ * - If want to add a close button your self you must make sure that alert goes back to the previous focusable element
+ *
+ * # Other Notes:
+ * - If you want the alert to be dismissible but also be a low priority alert (this means it doesn't)
+ * distribute the flow of screen readers then set `disableAutoFocus` to true, this will explicitly turn
+ * off Beams auto role="alert-dialog" when actions or an `Alert` is `dismissible`
+     
+ *
+ * # Resources:
+ * - https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/
+ * - https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/
+ *
+ *
+ */
+/**
+ *
+
+ * # A11y things that a user must do:
+ * - role
+ *   - It defaults ot be an alert, but you can change it:
+ *      1. alert: used for urgent and important messages
+ *      2. status: used for less important messages
+ *      3. alertdialog: used when when the alert has actions or when the alert opens like a dialog/modal
+ * - arial-live: for alerts that appear dynamically, (like in response to a user action). This is set by default
+ *     when using role alert or alertdialog.
+ *   - polite: the screen reader will announce the message when the user is idle
+ *   - assertive: the screen reader will announce the message immediately
+ *
+ *
+ * # A11y things that we should do:
+ * - When an alert appears move the focus to that alert?
+ * - When an alert is closed, make sure the focus goes to the next focusable element
+ *   or make the focus got to the element that triggered the alert?
+ * - aria-labelledby: to associate the alert with the heading and heading slot
+ * - aria-describedby: to associate the alert with the body and body slot
+ *
+ * # More things to test:
+ * - Test with various screen readers like JAWS, NVDA, VoiceOver (for macOS and iOS),
+ *   and TalkBack (for Android) and browsers to ensure the alerts are announced as expected.
+ * - Test with keyboard-only navigation to ensure the alerts are announced as expected.
+ *
+ * # Resources:
+ * - https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/
+ * - https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/
+ *
+ */
+export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Specify the heading text for Alert
+     */
+    heading?: React.ReactNode;
+    /**
+     * Specify the body text for Alert
+     */
+    body?: React.ReactNode;
+    /**
+     * Specify if actions display on the Alert
+     */
+    actions?: React.ReactNode;
+    /**
+     * Specify the size of the Alert
+     * @default 'sm'
+     */
+    size?: AlertSizes;
+    /**
+     * Specify if the Alert has no border radius
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Specify the theme of the Alert. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the appearance of the Alert
+     * @default 'infoPrimary'
+     */
+    appearance?: AlertAppearances;
+    /**
+     * Specify if the Alert is hidden
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Specify a different icon for the Alert
+     *
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify if the icon displays on the Alert
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Specify if the Alert can be dismissed
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Specify a callback function for when the close button is activated
+     */
+    onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify the role of the Alert
+     */
+    role?: AlertRoles;
+    /**
+     * Specify if the Alert should not autofocus the first focusable element
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Specify if the Alert should not close when the escape key is pressed
+     * @default false
+     */
+    disableCloseOnEscape?: boolean;
+}
+export declare function Alert({ heading, body, children, actions, theme, icon, size, fullWidth, appearance, className: _className, hidden, hideIcon, dismissible, disableAutoFocus, disableCloseOnEscape, role: _role, id: _id, onDismiss, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/Alert/Alert.es.js

@@ -0,0 +1,187 @@
+import "../../assets/Alert.css";
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import E from "clsx";
+import { memo as ee, useState as T, useRef as q, useCallback as te, useEffect as A, useMemo as re } from "react";
+import { b as ne, t as ae } from "../../chunks/constants.BBi77pmH.js";
+import { c as oe } from "../../chunks/CSSLookup.Cjf6o2Gz.js";
+import { g as le } from "../../chunks/classNames.DNsS4J__.js";
+import { f as ie } from "../../chunks/helpers.Wv7n4ip7.js";
+import { S as se } from "../../chunks/CheckCircleOutline.Bn3mTuUE.js";
+import { S as R } from "../../chunks/InfoOutline.Co5VGOxN.js";
+import { S as ce } from "../../chunks/WarningOutlined.B3hTzZPs.js";
+import { useResizeObserver as me } from "../../utils/hooks/index.es.js";
+import { CloseButton as fe } from "../CloseButton/CloseButton.es.js";
+const be = (a) => oe(a === "sm" ? 2.625 : 3.125), f = {
+  positive: "Success",
+  warning: "Warning",
+  negative: "Error",
+  infoPrimary: "Information",
+  infoSecondary: "Information"
+}, de = "Dismiss Alert", t = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-alert": "bm-alert",
+  "bm-alert__content__wrapper": "bm-alert__content__wrapper",
+  "bm-alert__content": "bm-alert__content",
+  "bm-alert__content__heading": "bm-alert__content__heading",
+  "bm-alert__actions": "bm-alert__actions",
+  "bm-alert__icon": "bm-alert__icon",
+  "bm-alert__icon--wrapping": "bm-alert__icon--wrapping",
+  "bm-alert__close-button": "bm-alert__close-button",
+  "bm-alert__close-button--wrapping": "bm-alert__close-button--wrapping",
+  "bm-alert--full-width": "bm-alert--full-width",
+  "bm-alert--md": "bm-alert--md",
+  "bm-alert--positive": "bm-alert--positive",
+  "bm-alert--warning": "bm-alert--warning",
+  "bm-alert--negative": "bm-alert--negative",
+  "bm-alert--infoPrimary": "bm-alert--infoPrimary",
+  "bm-alert--infoSecondary": "bm-alert--infoSecondary",
+  "bm-alert--no-box": "bm-alert--no-box"
+}, { baseClassNamePrefix: pe, subElementClassPrefix: o, classModifierPrefix: k } = le("alert"), ue = ee(({ appearance: a, hideIcon: i, icon: b, isContentWrapping: s }) => {
+  const d = t[`${o}icon`], h = t[`${o}icon--wrapping`], l = E(d, s && h);
+  if (i) return null;
+  const w = {
+    positive: /* @__PURE__ */ r(se, { role: "img", "aria-label": f.positive }),
+    warning: /* @__PURE__ */ r(ce, { role: "img", "aria-label": f.warning }),
+    negative: /* @__PURE__ */ r(R, { role: "img", "aria-label": f.negative }),
+    infoPrimary: /* @__PURE__ */ r(R, { role: "img", "aria-label": f.infoPrimary }),
+    infoSecondary: /* @__PURE__ */ r(R, { role: "img", "aria-label": f.infoSecondary })
+  };
+  return /* @__PURE__ */ r("span", { className: l, children: b || w[a] });
+});
+function ke({
+  heading: a,
+  body: i,
+  children: b,
+  actions: s,
+  theme: d,
+  icon: h,
+  size: l = "sm",
+  fullWidth: w = !1,
+  appearance: C = "infoPrimary",
+  className: z,
+  hidden: B = !1,
+  hideIcon: D = !1,
+  dismissible: c = !1,
+  disableAutoFocus: $ = !1,
+  disableCloseOnEscape: W = !1,
+  role: H,
+  id: G,
+  onDismiss: p,
+  ...J
+}) {
+  const u = i || b, g = H === "alertdialog" || !!(!$ && (s || c)), L = g ? "alertdialog" : H, [m, Q] = T(B), [F, U] = T(!1), S = q(null), M = q(null), I = te(
+    (e) => {
+      const { current: n } = M;
+      p == null || p(e), Q(!0), n && n.focus();
+    },
+    [p]
+  ), V = () => {
+    const { current: e } = O;
+    if (e) {
+      const { offsetHeight: n } = e, y = be(l);
+      U(n > y);
+    }
+  }, { ref: O } = me(
+    V,
+    ne,
+    [l]
+  );
+  A(() => {
+    M.current = document.activeElement;
+  }, []), A(() => {
+    const { current: e } = S;
+    if (!e || !g || $ || m) return;
+    const n = ie(e);
+    n == null || n.focus();
+  }, [g, $, m]), A(() => {
+    const { current: e } = S, n = (y) => {
+      const { key: Z } = y;
+      Z === "Escape" && I(y);
+    };
+    return e && c && !m && !W && e.addEventListener("keydown", n), () => {
+      e && e.removeEventListener("keydown", n);
+    };
+  }, [I, m, c, W]);
+  const X = re(
+    () => `bm-alert-${Math.random().toString(36).slice(2, 9)}`,
+    []
+  ), N = G || X, j = a ? `${N}-heading` : void 0, _ = u ? `${N}-body` : void 0;
+  let v, K;
+  const P = g || c;
+  P && a ? v = j : P && i && (v = _), P && i && v !== _ && (K = _);
+  const Y = E(
+    t[pe],
+    d && ae(d),
+    C && t[`${k}${C}`],
+    l && t[`${k}${l}`],
+    w && t[`${k}full-width`],
+    z
+  );
+  return B || m ? null : /* @__PURE__ */ x(
+    "div",
+    {
+      role: L,
+      ref: S,
+      className: Y,
+      ...L === "alertdialog" ? { "aria-modal": "false" } : {},
+      "aria-labelledby": v,
+      "aria-describedby": K,
+      id: N,
+      ...J,
+      children: [
+        /* @__PURE__ */ r(
+          ue,
+          {
+            appearance: C,
+            hideIcon: D,
+            icon: h,
+            isContentWrapping: F || !!(a && u)
+          }
+        ),
+        /* @__PURE__ */ x(
+          "div",
+          {
+            className: t[`${o}content__wrapper`],
+            ref: O,
+            children: [
+              /* @__PURE__ */ x("div", { className: t[`${o}content`], children: [
+                a && /* @__PURE__ */ r(
+                  "span",
+                  {
+                    id: j,
+                    className: t[`${o}content__heading`],
+                    children: a
+                  }
+                ),
+                u && /* @__PURE__ */ r("span", { id: _, children: u })
+              ] }),
+              s && /* @__PURE__ */ r("div", { className: t[`${o}actions`], children: s })
+            ]
+          }
+        ),
+        c && /* @__PURE__ */ r(
+          "span",
+          {
+            className: E(
+              t[`${o}close-button`],
+              F && t[`${o}close-button--wrapping`]
+            ),
+            children: /* @__PURE__ */ r(
+              fe,
+              {
+                size: l,
+                onClick: I,
+                "aria-label": de
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ke as Alert
+};

package/lib/Alert/index.cjs.js

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

package/lib/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/lib/Alert/index.es.js

@@ -0,0 +1,4 @@
+import { Alert as o } from "./Alert.es.js";
+export {
+  o as Alert
+};

package/lib/Autocomplete/Autocomplete.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),n=require("react"),Qe=require("../../chunks/classNames.DAeKwerT.js"),Ue=require("../../chunks/constants.hwjHOsvT.js"),i=require("../../chunks/combobox.module.XIDBRMf_.js"),V=require("clsx"),E=require("../../chunks/form.context.B1PXIJNq.js"),Xe=require("../Form/contexts/label.context.cjs.js"),Ye=require("../Form/contexts/helperText.context.cjs.js"),L=require("../ActionList/ActionList.cjs.js"),H=require("../_Options/Option.context.cjs.js"),Ze=require("../_Options/Option.cjs.js"),et=require("../_Options/useSelectValue.cjs.js"),tt=require("./useAutocompleteDropdown.cjs.js"),st=require("./AutocompleteDropdown.cjs.js"),ot=require("./useAutocompleteChips.cjs.js"),lt=require("./useAutocompleteKeyboardManager.cjs.js"),it=require("./utils/filterOptions.cjs.js"),rt=require("./useClearSelection.cjs.js"),nt=require("./AutocompleteField.cjs.js"),ct=require("./useAutocompleteA11y.cjs.js"),at=require("./useAutocompleteInteractions.cjs.js"),ut=require("../_Options/strategies/SelectionStrategy.cjs.js"),dt=require("../_Options/OptionChips.cjs.js"),{baseClassNamePrefix:pt,subElementClassPrefix:$,classModifierPrefix:c}=Qe.getBEMClassNames("combobox"),mt=n.forwardRef(({theme:q,width:K,error:u,children:G,label:W=null,contentBefore:z,contentAfter:J,fluid:Q=!1,helperText:F=null,validationRules:U=[],className:X,hideRequiredMarker:Y=!1,disabled:Z=!1,readOnly:ee=!1,required:te=!1,placeholder:se="",onChange:x,noResultsText:oe="No results found",optionFilter:v,..._},le)=>{const{id:B,name:ie,"aria-describedby":re,multiple:s=!1,clearable:ne=s,...ce}=_,{showErrors:ae,isInvalid:ue,errorShown:de,disabled:o,readOnly:r,required:C}=E.useFormField({name:ie,validationRules:U,disabledProp:Z,readOnlyProp:ee,requiredProp:te}),{aria:y,ids:pe}=ct.useAutocompleteA11y({helperText:F,externalDescribedBy:re,error:u,errorShown:de,invalid:!!u||ue}),{helperTextId:me,errorId:be,validationErrorsId:xe,labelId:g}=pe,_e=!!(u!=null&&u.length),ye=n.useCallback(t=>{x==null||x(t)},[x]),{value:d,setValue:D,selectProps:he,handleBlur:fe,singleValue:P}=et.useSelectValue({onChange:ye,..._},le),[p,S]=n.useState(null),I=!p&&(!d||Array.isArray(d)&&!d.length),{optionsContext:Ae,optionIds:a,optionsProps:m,selectedOptionsProps:j,deselectOptionValue:w,getOptionByIndex:Oe}=H.useCreateOptionsContext(d,D,s),qe=n.useMemo(()=>{if(!P)return;const t=a.map(e=>m.get(e)).findIndex(e=>(e==null?void 0:e.value)===P);return t!==-1?t:void 0},[a,m,P]),M=n.useRef(null),{getFieldProps:ve,getInputProps:Ce,dropdownProps:ge,refs:Pe,open:R,setOpen:h,status:Se,setDisplayActiveIndex:Ie}=tt.useAutocompleteDropdown({disabled:o,readOnly:r,lastSelectedOptionIndex:qe,fieldRef:M}),f=Pe.domReference,je=V(i.styles[pt],q&&Ue.themeClassName(q),Q&&i.styles[`${c}fluid`],y.invalid&&i.styles[`${c}error`],o&&i.styles[`${c}disabled`],r&&i.styles[`${c}read-only`],I&&i.styles[`${c}empty`],s&&i.styles[`${c}multiple`],i.styles[`${c}autocomplete`],i.styles[`${c}dropdown-${Se}`],X),{canClear:Me,handleClear:Ne}=rt.useClearSelection({multiple:s,clearable:ne,isEmpty:I,disabled:o,readOnly:r,setValue:D,setSearchText:S,inputRef:f,setOpen:h}),{chipGroupProps:$e,handleBlur:Fe,selectedChip:Be,setSelectedChip:De,enabled:we,selectPreviousChip:Re,selectNextChip:ke,options:Te,deselectOptionValue:Ve}=ot.useAutocompleteChips({multiple:s,disabled:o,readOnly:r,open:R,setOpen:h,options:j,deselectOptionValue:w,fieldRef:M,inputRef:f}),{getKeyboardProps:k}=lt.useAutocompleteKeyboardManager({multiple:s,disabled:o,readOnly:r,open:R,setOpen:h,inputRef:f,fieldRef:M,chips:{enabled:we,selectedChip:Be,setSelectedChip:De,selectPreviousChip:Re,selectNextChip:ke,options:Te,deselectOptionValue:Ve}}),T=n.useMemo(()=>ut.createSelectionStrategy(s),[s]),{handleBlur:Ee,handleFocus:Le,handleItemClick:He}=at.useAutocompleteInteractions({selectionStrategy:T,selectedOptions:j,inputRef:f,blurSelect:fe,blurChips:Fe,setSearchText:S,setOpen:h,searchText:p,getOptionByIndex:Oe,setDisplayActiveIndex:Ie}),N=n.useMemo(()=>a.reduce((t,e)=>{const b=m.get(e);if(!b)return t;const A=v?v(b,p):it.shouldFilterOption(b,p);return t[e]=A,t},{}),[a,m,p,v]),Ke=n.useMemo(()=>a.every(t=>N[t]),[a,N]),{ref:Ge,...We}=k(ve()),ze=k(Ce());return l.jsxs(H.OptionsProvider,{value:Ae,children:[l.jsxs("div",{className:je,style:{maxWidth:K},children:[l.jsx(Xe.LabelProvider,{ctxHtmlFor:B,ctxDisabled:o,ctxRequired:C&&!Y,ctxId:g,children:W}),l.jsx(nt.AutocompleteField,{id:B,disabled:o,readOnly:r,required:C,contentBefore:z,contentAfter:J,chips:l.jsx(dt.OptionChips,{multiple:s,disabled:o,readOnly:r,selectedOptions:j,deselectOptionValue:w,chipGroupProps:$e,input:l.jsx("input",{className:i.styles[`${$}field__input`],"aria-readonly":r,"aria-disabled":o,"aria-required":C,"aria-invalid":y.invalid,"aria-errormessage":y.errorMessage||void 0,"aria-labelledby":!_.ariaLabel&&g?g:void 0,"aria-label":_.ariaLabel,"aria-describedby":y.describedBy,placeholder:s&&!I?"":se,onChange:t=>S(t.target.value),disabled:o,readOnly:r,autoComplete:"off",tabIndex:o?-1:0,autoFocus:!1,...ze})}),hasClearButton:Me,onClear:Ne,onBlur:Ee,onFocusCapture:Le,...We,ref:Ge}),l.jsxs(Ye.HelperTextProvider,{ctxId:me,ctxDisabled:o,children:[F,_e&&l.jsx(E.HelperText,{id:be,appearance:"negative",children:u})]}),ae(xe)]}),l.jsxs("select",{...ce,...he,hidden:!0,multiple:s,children:[l.jsx("option",{value:"",children:"empty"}),G]}),l.jsx(st.AutocompleteDropdown,{...ge,className:i.styles[`${$}dropdown`],disabled:o,readOnly:r,theme:q,multiple:s,onItemClick:He,children:l.jsx(L.ActionList,{role:"listbox",noResults:Ke?oe:void 0,children:a.map(t=>{const e=m.get(t);if(!e)return null;const b=T.isSelected(e.value,d),A=N[t],Je=A||e.disabled;return n.createElement(L.ActionList.Item,{...e,className:V(i.styles[`${$}option`],e.className),disabled:Je,hidden:A,defaultSelected:b,key:`opt-${e.value??e.label}`,kind:s?"checkbox":"singleCheckMark",role:"option"})})})})]})}),O=mt;O.Option=Ze.Option;O.displayName="Autocomplete";exports.Autocomplete=O;exports.default=O;

package/lib/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,108 @@
+import { FormValidator } from '@viasat/beam-shared/components/form';
+import { ThemeTypes } from '@viasat/beam-shared/utils';
+import { default as React, FC, PropsWithoutRef, ReactNode } from 'react';
+import { Option, OptionProps } from '../_Options';
+export interface AutocompleteProps extends React.ComponentPropsWithRef<'select'> {
+    /**
+     * Specify HelperText for Autocomplete
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify Label for Autocomplete
+     */
+    label?: ReactNode;
+    /**
+     * Specify if Autocomplete is a required input
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if Autocomplete displays in a read-only state
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if Autocomplete displays in a disabled state
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify error text and display error state of a Autocomplete
+     */
+    error?: boolean | string;
+    /**
+     * Specify if Autocomplete is fluid
+     *
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify the width of Autocomplete
+     */
+    width?: string;
+    /**
+     * Specify if the Autocomplete displays with an asterisk
+     *
+     * @default false
+     */
+    hideRequiredMarker?: boolean;
+    /**
+     * Specify form validation rules for Autocomplete
+     */
+    validationRules?: FormValidator[];
+    /**
+     * Specify the theme of the Autocomplete. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Sets the selection type to multiselect. Set this to true for multiselect, even if fully controlling selection state. This enables styles and accessibility properties to be set
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Specify if the Autocomplete is clearable. Defaults to `true` if `multiple` is set, `false` otherwise
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Specify content to display before selection
+     */
+    contentBefore?: ReactNode;
+    /**
+     * Specify content to display after selection
+     */
+    contentAfter?: ReactNode;
+    /**
+     * Add `Autocomplete.Option` components as children
+     */
+    children: ReactNode;
+    /**
+     * Specify an accessible label for the Autocomplete
+     */
+    ariaLabel?: string;
+    /**
+     * Specify a placeholder for the Autocomplete
+     */
+    placeholder?: string;
+    /**
+     * Specify text to display when no options are available
+     *
+     * @default "No results found"
+     */
+    noResultsText?: string;
+    /**
+     * Provide a custom option filtering function. Receives all option props (including undefined placeholders), and the current search text.
+     * Should return a filtered array (can re-order). Defaults to internal case-insensitive label/value matching
+     */
+    optionFilter?: (option: OptionProps, searchText: string | null) => boolean;
+}
+declare const AutocompleteComponent: FC<PropsWithoutRef<AutocompleteProps>>;
+export declare const Autocomplete: typeof AutocompleteComponent & {
+    Option: typeof Option;
+};
+export default Autocomplete;