@viasat/beam-react 2.0.0

package/lib/Divider/Divider.es.js

@@ -0,0 +1,96 @@
+import "../../assets/Divider.css";
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import N from "clsx";
+import { a as C, g as P } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { forwardRef as u } from "react";
+const r = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-divider--vertical": "bm-divider--vertical",
+  "bm-divider": "bm-divider",
+  "bm-divider--horizontal": "bm-divider--horizontal",
+  "bm-divider__wrapper": "bm-divider__wrapper",
+  "bm-divider__content": "bm-divider__content",
+  "bm-divider__icon": "bm-divider__icon",
+  "bm-divider--icon-only": "bm-divider--icon-only",
+  "bm-divider__text": "bm-divider__text",
+  "bm-divider--border-width-md": "bm-divider--border-width-md",
+  "bm-divider--border-width-lg": "bm-divider--border-width-lg",
+  "bm-divider--border-width-xl": "bm-divider--border-width-xl",
+  "bm-divider--border-style-dashed": "bm-divider--border-style-dashed",
+  "bm-divider--border-style-dotted": "bm-divider--border-style-dotted",
+  "bm-divider--border-color-border-00": "bm-divider--border-color-border-00",
+  "bm-divider--border-color-border-00-alt": "bm-divider--border-color-border-00-alt",
+  "bm-divider--border-color-border-01": "bm-divider--border-color-border-01",
+  "bm-divider--border-color-border-02": "bm-divider--border-color-border-02",
+  "bm-divider--border-color-border-03": "bm-divider--border-color-border-03",
+  "bm-divider--border-color-border-strong": "bm-divider--border-color-border-strong",
+  "bm-divider--border-color-border-positive": "bm-divider--border-color-border-positive",
+  "bm-divider--border-color-border-warning": "bm-divider--border-color-border-warning",
+  "bm-divider--border-color-border-negative": "bm-divider--border-color-border-negative",
+  "bm-divider--border-color-border-info-primary": "bm-divider--border-color-border-info-primary",
+  "bm-divider--border-color-border-info-secondary": "bm-divider--border-color-border-info-secondary",
+  "bm-divider--border-color-border-positive-strong": "bm-divider--border-color-border-positive-strong",
+  "bm-divider--border-color-border-warning-strong": "bm-divider--border-color-border-warning-strong",
+  "bm-divider--border-color-border-negative-strong": "bm-divider--border-color-border-negative-strong",
+  "bm-divider--border-color-border-info-primary-strong": "bm-divider--border-color-border-info-primary-strong",
+  "bm-divider--border-color-border-info-secondary-strong": "bm-divider--border-color-border-info-secondary-strong",
+  "bm-divider--border-color-border-inverse": "bm-divider--border-color-border-inverse",
+  "bm-divider--align-start": "bm-divider--align-start",
+  "bm-divider--align-end": "bm-divider--align-end"
+}, {
+  baseClassNamePrefix: z,
+  classModifierPrefix: d,
+  subElementClassPrefix: b,
+  variablePrefix: B
+} = P("divider"), S = u((m, s) => {
+  const {
+    children: e,
+    orientation: n = "horizontal",
+    borderColor: v = "00",
+    borderWidth: a = "md",
+    borderStyle: c = "solid",
+    alignContent: g = "center",
+    length: p,
+    inset: y = "0",
+    icon: o,
+    className: h,
+    ...t
+  } = m, l = !!(e || o), f = !!(o && !e), $ = C({
+    [`p${n === "vertical" ? "y" : "x"}`]: y
+  }), _ = N(
+    r[z],
+    r[`${d}${n}`],
+    r[`${d}border-width-${a}`],
+    r[`${d}border-style-${c}`],
+    r[`${d}border-color-border-${v}`],
+    l && r[`${d}align-${g}`],
+    f && r[`${d}icon-only`],
+    $,
+    h
+  ), w = {
+    [`${B}-length`]: p || "100%",
+    ...t.style
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: s,
+      className: _,
+      role: "separator",
+      "aria-orientation": n,
+      style: w,
+      ...t,
+      children: /* @__PURE__ */ i("div", { className: `${b}wrapper`, children: l && /* @__PURE__ */ x("div", { className: `${b}content`, children: [
+        o && /* @__PURE__ */ i("span", { className: `${b}icon`, children: o }),
+        e && /* @__PURE__ */ i("span", { className: `${b}text`, children: e })
+      ] }) })
+    }
+  );
+});
+S.displayName = "Divider";
+export {
+  S as Divider
+};

package/lib/Divider/index.cjs.js

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

package/lib/Divider/index.d.ts

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

package/lib/Divider/index.es.js

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

package/lib/EmptyState/EmptyState.cjs.js

@@ -0,0 +1 @@
+var v=require("../../assets/EmptyState.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("clsx"),h=require("../../chunks/classNames.DAeKwerT.js"),x=require("../../chunks/constants.hwjHOsvT.js");require("react");const o=require("../Form/hooks/useAccessibleId.hook.cjs.js");require("../../chunks/form.context.B1PXIJNq.js");const s={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-empty-state":"bm-empty-state","bm-empty-state__icon":"bm-empty-state__icon","bm-empty-state__body-container":"bm-empty-state__body-container","bm-empty-state__heading":"bm-empty-state__heading","bm-empty-state__body":"bm-empty-state__body","bm-empty-state__actions":"bm-empty-state__actions"};function b({theme:c,heading:a,body:i,actions:n,icon:r,className:d,..._}){const{baseClassNamePrefix:y,subElementClassPrefix:t}=h.getBEMClassNames("empty-state"),u=s[y],p=N(u,c&&x.themeClassName(c),d),{id:l}=o.useAccessibleId(),{id:m}=o.useAccessibleId();return e.jsxs("div",{className:p,"aria-labelledby":a?l:i?m:void 0,"aria-describedby":a&&i?m:void 0,..._,children:[r&&e.jsx("span",{className:s[`${t}icon`],children:r}),e.jsxs("div",{className:s[`${t}body-container`],children:[a&&e.jsx("span",{id:l,className:s[`${t}heading`],children:a}),i&&e.jsx("span",{id:m,className:s[`${t}body`],children:i})]}),n&&e.jsx("div",{className:s[`${t}actions`],children:n})]})}exports.EmptyState=b;exports.default=b;

package/lib/EmptyState/EmptyState.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+export interface EmptyStateProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Specify heading text for EmptyState
+     */
+    heading?: React.ReactNode;
+    /**
+     * Specify body text for EmptyState
+     */
+    body?: React.ReactNode;
+    /**
+     * Specify an icon for EmptyState
+     */
+    icon?: React.ReactElement;
+    /**
+     * Add actions to EmptyState
+     */
+    actions?: React.ReactNode;
+    /**
+     * Specify the theme of the EmptyState. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+export declare function EmptyState({ theme, heading, body, actions, icon, className: _className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

package/lib/EmptyState/EmptyState.es.js

@@ -0,0 +1,51 @@
+import "../../assets/EmptyState.css";
+import { jsxs as b, jsx as m } from "react/jsx-runtime";
+import f from "clsx";
+import { g as h } from "../../chunks/classNames.DNsS4J__.js";
+import { t as v } from "../../chunks/constants.BBi77pmH.js";
+import "react";
+import { useAccessibleId as d } from "../Form/hooks/useAccessibleId.hook.es.js";
+import "../../chunks/form.context.CNWjF5qA.js";
+const t = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-empty-state": "bm-empty-state",
+  "bm-empty-state__icon": "bm-empty-state__icon",
+  "bm-empty-state__body-container": "bm-empty-state__body-container",
+  "bm-empty-state__heading": "bm-empty-state__heading",
+  "bm-empty-state__body": "bm-empty-state__body",
+  "bm-empty-state__actions": "bm-empty-state__actions"
+};
+function k({
+  theme: o,
+  heading: s,
+  body: a,
+  actions: r,
+  icon: n,
+  className: l,
+  ...p
+}) {
+  const { baseClassNamePrefix: y, subElementClassPrefix: e } = h("empty-state"), _ = t[y], N = f(_, o && v(o), l), { id: c } = d(), { id: i } = d();
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: N,
+      "aria-labelledby": s ? c : a ? i : void 0,
+      "aria-describedby": s && a ? i : void 0,
+      ...p,
+      children: [
+        n && /* @__PURE__ */ m("span", { className: t[`${e}icon`], children: n }),
+        /* @__PURE__ */ b("div", { className: t[`${e}body-container`], children: [
+          s && /* @__PURE__ */ m("span", { id: c, className: t[`${e}heading`], children: s }),
+          a && /* @__PURE__ */ m("span", { id: i, className: t[`${e}body`], children: a })
+        ] }),
+        r && /* @__PURE__ */ m("div", { className: t[`${e}actions`], children: r })
+      ]
+    }
+  );
+}
+export {
+  k as EmptyState,
+  k as default
+};

package/lib/EmptyState/EmptyState.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/EmptyState/index.cjs.js

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

package/lib/EmptyState/index.d.ts

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

package/lib/EmptyState/index.es.js

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

package/lib/FileUpload/FileUpload.Button.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("react"),y=require("../../chunks/constants.hwjHOsvT.js"),F=require("../../chunks/classNames.DAeKwerT.js"),N=require("clsx"),R=require("../Button/Button.cjs.js"),c=require("../../chunks/fileUpload.module.CYse7_N5.js"),j=require("../../chunks/Upload.jKR_HysC.js"),M=require("./FileUploadContext.cjs.js"),P=require("../Form/hooks/useUniversalRef.hook.cjs.js"),{baseClassNamePrefix:S,classModifierPrefix:v}=F.getBEMClassNames("file-upload-button"),I=o.forwardRef(function({children:u,theme:l,className:f,disabled:d,accept:p,multiple:m,onChange:n,buttonProps:C,...b},x){const{refFn:q,ref:i}=P.useUniversalRef(x),{ctxAccept:U,ctxMultiple:h,ctxAddFiles:t}=o.useContext(M.FileUploadContext),a=d||!1,_=p||U,r=m||h,g=N(c.styles[S],l&&y.themeClassName(l),a&&c.styles[`${v}disabled`],f),k=e=>{n&&(n(e),e.isDefaultPrevented())||e.target.files&&(t==null||t(e.target.files))},B=o.useCallback(()=>{var e;(e=i.current)==null||e.click()},[i]);return s.jsxs(R.Button,{appearance:"neutral-subtle",kind:"outline",size:"md",iconOnly:!1,iconBefore:s.jsx(j.SvgUpload,{}),...C,className:g,onClick:B,disabled:a,children:[s.jsx("input",{hidden:!0,type:"file",ref:q,accept:_,multiple:r,onChange:k,...b}),u??(r?"Choose files":"Choose file")]})});exports.FileUploadButtonComponent=I;

package/lib/FileUpload/FileUpload.Button.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { ButtonProps as BEAMButtonProps } from '../Button';
+export interface FileUploadButtonProps extends React.ComponentPropsWithRef<'input'> {
+    /**
+     * Specify text for the Button
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify if FileUpload is in error state
+     */
+    error?: boolean;
+    /**
+     * Specify the props passed to the Button component
+     */
+    buttonProps?: BEAMButtonProps;
+    /**
+     * Specify the theme of the FileUpload. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+export declare const FileUploadButtonComponent: React.ForwardRefExoticComponent<Omit<FileUploadButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/lib/FileUpload/FileUpload.Button.es.js

@@ -0,0 +1,65 @@
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { forwardRef as M, useContext as P, useCallback as R } from "react";
+import { t as j } from "../../chunks/constants.BBi77pmH.js";
+import { g as F } from "../../chunks/classNames.DNsS4J__.js";
+import I from "clsx";
+import { Button as S } from "../Button/Button.es.js";
+import { s as n } from "../../chunks/fileUpload.module.Ck0Nfc4j.js";
+import { S as w } from "../../chunks/Upload.Dwk6BbNa.js";
+import { FileUploadContext as z } from "./FileUploadContext.es.js";
+import { useUniversalRef as D } from "../Form/hooks/useUniversalRef.hook.es.js";
+const { baseClassNamePrefix: E, classModifierPrefix: O } = F("file-upload-button"), T = M(function({
+  children: f,
+  theme: o,
+  className: c,
+  disabled: m,
+  accept: p,
+  multiple: u,
+  onChange: s,
+  buttonProps: d,
+  ...C
+}, x) {
+  const { refFn: b, ref: i } = D(x), { ctxAccept: h, ctxMultiple: g, ctxAddFiles: t } = P(z), l = m || !1, k = p || h, r = u || g, N = I(
+    n[E],
+    o && j(o),
+    l && n[`${O}disabled`],
+    c
+  ), B = (e) => {
+    s && (s(e), e.isDefaultPrevented()) || e.target.files && (t == null || t(e.target.files));
+  }, U = R(() => {
+    var e;
+    (e = i.current) == null || e.click();
+  }, [i]);
+  return /* @__PURE__ */ y(
+    S,
+    {
+      appearance: "neutral-subtle",
+      kind: "outline",
+      size: "md",
+      iconOnly: !1,
+      iconBefore: /* @__PURE__ */ a(w, {}),
+      ...d,
+      className: N,
+      onClick: U,
+      disabled: l,
+      children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            hidden: !0,
+            type: "file",
+            ref: b,
+            accept: k,
+            multiple: r,
+            onChange: B,
+            ...C
+          }
+        ),
+        f ?? (r ? "Choose files" : "Choose file")
+      ]
+    }
+  );
+});
+export {
+  T as FileUploadButtonComponent
+};

package/lib/FileUpload/FileUpload.Dropzone.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),R=require("../../chunks/constants.hwjHOsvT.js"),n=require("../../chunks/fileUpload.module.CYse7_N5.js"),M=require("../../chunks/classNames.DAeKwerT.js"),a=require("clsx"),P=require("../../chunks/Upload.jKR_HysC.js"),L=require("../Icon/Icon.cjs.js"),w=require("../StateLayer/StateLayer.cjs.js"),z=require("./FileUploadContext.cjs.js"),K=require("../Form/hooks/useUniversalRef.hook.cjs.js"),O=require("./helpers.cjs.js"),{baseClassNamePrefix:T,classModifierPrefix:d,subElementClassPrefix:o}=M.getBEMClassNames("file-upload-dropzone"),B=l.forwardRef(function({error:y,children:i,theme:f,className:D,disabled:b,accept:h,multiple:C,onChange:p,...q},_){const[g,c]=l.useState(!1),{refFn:U,ref:m}=K.useUniversalRef(_),{ctxAccept:k,ctxMultiple:N,ctxAddFiles:u}=l.useContext(z.FileUploadContext),s=b||!1,j=h||k,v=C||N,F=a(n.styles[T],f&&R.themeClassName(f),s&&n.styles[`${d}disabled`],y&&n.styles[`${d}error`],g&&n.styles[`${d}dragging`],D),I=l.useMemo(()=>i||t.jsxs(t.Fragment,{children:["Drag and drop or"," ",t.jsx("span",{className:a(n.styles[`${o}link`]),children:"click"})," ","to upload"]}),[i]),x=e=>{p&&(p(e),e.isDefaultPrevented())||e.target.files&&(u==null||u(e.target.files))},S=e=>{if(e.preventDefault(),s)return;const r=O.createChangeEvent(e.dataTransfer);c(!1),x(r)},$=e=>{var r;s||(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),(r=m.current)==null||r.click())},E=e=>{var r;s?e.preventDefault():(r=m.current)==null||r.click()};return t.jsxs("div",{className:F,onClick:E,onDragEnter:()=>!s&&c(!0),onDragLeave:()=>g&&c(!1),onDragOver:e=>e.preventDefault(),onDrop:S,role:"button","aria-disabled":s,tabIndex:s?void 0:0,onKeyDown:$,children:[t.jsx("input",{...q,hidden:!0,type:"file",ref:U,accept:j,multiple:v,onChange:x,disabled:s}),t.jsx(w.StateLayer,{className:a(n.styles[`${o}state-layer`])}),t.jsx(L.Icon,{className:a(n.styles[`${o}icon`]),icon:P.SvgUpload}),t.jsx("span",{className:a(n.styles[`${o}text`]),children:I})]})});exports.FileUploadDropzoneComponent=B;

package/lib/FileUpload/FileUpload.Dropzone.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+export interface FileUploadDropzoneProps extends React.ComponentPropsWithRef<'input'> {
+    /**
+     * Specify text for the Dropzone
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify if FileUpload is in error state
+     */
+    error?: boolean;
+    /**
+     * Specify the theme of the FileUpload. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+export declare const FileUploadDropzoneComponent: React.ForwardRefExoticComponent<Omit<FileUploadDropzoneProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/lib/FileUpload/FileUpload.Dropzone.es.js

@@ -0,0 +1,87 @@
+import { jsxs as D, Fragment as P, jsx as o } from "react/jsx-runtime";
+import { forwardRef as S, useState as U, useContext as K, useMemo as R } from "react";
+import { t as j } from "../../chunks/constants.BBi77pmH.js";
+import { s as t } from "../../chunks/fileUpload.module.Ck0Nfc4j.js";
+import { g as z } from "../../chunks/classNames.DNsS4J__.js";
+import n from "clsx";
+import { S as L } from "../../chunks/Upload.Dwk6BbNa.js";
+import { Icon as B } from "../Icon/Icon.es.js";
+import { StateLayer as O } from "../StateLayer/StateLayer.es.js";
+import { FileUploadContext as T } from "./FileUploadContext.es.js";
+import { useUniversalRef as q } from "../Form/hooks/useUniversalRef.hook.es.js";
+import { createChangeEvent as A } from "./helpers.es.js";
+const { baseClassNamePrefix: G, classModifierPrefix: f, subElementClassPrefix: s } = z("file-upload-dropzone"), se = S(function({
+  error: h,
+  children: l,
+  theme: p,
+  className: x,
+  disabled: C,
+  accept: k,
+  multiple: y,
+  onChange: m,
+  ...N
+}, b) {
+  const [d, i] = U(!1), { refFn: v, ref: u } = q(b), { ctxAccept: $, ctxMultiple: E, ctxAddFiles: c } = K(T), r = C || !1, F = k || $, I = y || E, w = n(
+    t[G],
+    p && j(p),
+    r && t[`${f}disabled`],
+    h && t[`${f}error`],
+    d && t[`${f}dragging`],
+    x
+  ), M = R(() => l || /* @__PURE__ */ D(P, { children: [
+    "Drag and drop or",
+    " ",
+    /* @__PURE__ */ o("span", { className: n(t[`${s}link`]), children: "click" }),
+    " ",
+    "to upload"
+  ] }), [l]), g = (e) => {
+    m && (m(e), e.isDefaultPrevented()) || e.target.files && (c == null || c(e.target.files));
+  };
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      className: w,
+      onClick: (e) => {
+        var a;
+        r ? e.preventDefault() : (a = u.current) == null || a.click();
+      },
+      onDragEnter: () => !r && i(!0),
+      onDragLeave: () => d && i(!1),
+      onDragOver: (e) => e.preventDefault(),
+      onDrop: (e) => {
+        if (e.preventDefault(), r)
+          return;
+        const a = A(e.dataTransfer);
+        i(!1), g(a);
+      },
+      role: "button",
+      "aria-disabled": r,
+      tabIndex: r ? void 0 : 0,
+      onKeyDown: (e) => {
+        var a;
+        r || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), (a = u.current) == null || a.click());
+      },
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            ...N,
+            hidden: !0,
+            type: "file",
+            ref: v,
+            accept: F,
+            multiple: I,
+            onChange: g,
+            disabled: r
+          }
+        ),
+        /* @__PURE__ */ o(O, { className: n(t[`${s}state-layer`]) }),
+        /* @__PURE__ */ o(B, { className: n(t[`${s}icon`]), icon: L }),
+        /* @__PURE__ */ o("span", { className: n(t[`${s}text`]), children: M })
+      ]
+    }
+  );
+});
+export {
+  se as FileUploadDropzoneComponent
+};

package/lib/FileUpload/FileUpload.List.Item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),U=require("../../chunks/classNames.DAeKwerT.js"),w=require("../../chunks/constants.hwjHOsvT.js"),u=require("react"),s=require("../../chunks/fileUpload.module.CYse7_N5.js"),t=require("clsx"),L=require("../CloseButton/CloseButton.cjs.js"),M=require("../ProgressBar/ProgressBar.cjs.js"),f=require("../../chunks/form.context.B1PXIJNq.js"),_=require("../Icon/Icon.cjs.js"),R=require("../Tooltip/Tooltip.cjs.js"),k=require("./FileUploadListContext.cjs.js"),v=require("../../chunks/tokens.Bgac_JPh.js");function D(l){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const c in l)if(c!=="default"){const a=Object.getOwnPropertyDescriptor(l,c);Object.defineProperty(i,c,a.get?a:{enumerable:!0,get:()=>l[c]})}}return i.default=l,Object.freeze(i)}const r=D(u),V=l=>r.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l},r.createElement("g",{clipPath:"url(#clip0_501_2445)"},r.createElement("path",{d:"M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z",fill:"currentColor"})),r.createElement("defs",null,r.createElement("clipPath",{id:"clip0_501_2445"},r.createElement("rect",{width:24,height:24,fill:"none"})))),{baseClassNamePrefix:W,classModifierPrefix:m,subElementClassPrefix:o}=U.getBEMClassNames("file-upload-list-item"),p={error:{customIconColor:v.bmCompFileUploadColorFileIconError,icon:f.SvgError},success:{customIconColor:v.bmCompFileUploadColorFileIconSuccess,icon:f.SvgCheckCircle}};function Z({error:l,fileName:i,fileSize:c,onDismiss:a,size:N="md",thumbnail:$,state:n="uploaded",progress:x=0,theme:b,className:q,disabled:I,...T}){const{ctxSize:O,ctxThumbnail:h,ctxDisabled:P}=u.useContext(k.FileUploadListContext),C=O??N,d=h===!1?!1:$??h??!1,g=I??P,S=t(s.styles[W],b&&w.themeClassName(b),s.styles[`${m}${C}`],s.styles[`${m}${n}`],g&&s.styles[`${m}disabled`],q),j=u.useRef(null),[z,y]=u.useState(!1),E=F=>{const{offsetWidth:B=0,scrollWidth:H=0}=j.current??{};B<H?y(F):y(!1)};return e.jsxs("div",{className:S,...T,children:[d&&e.jsx("div",{className:t(s.styles[`${o}thumbnail`]),children:d===!0?e.jsx(_.Icon,{color:"secondary",icon:V,size:C==="md"?"sm":"md"}):e.jsx("img",{src:d,alt:i})}),e.jsxs("div",{className:t(s.styles[`${o}content`]),children:[e.jsxs("div",{className:t(s.styles[`${o}content-start`]),children:[e.jsx(R.Tooltip,{text:i,portalled:!0,placement:"top",onOpenChange:E,open:z,children:e.jsx("p",{className:t(s.styles[`${o}filename`]),ref:j,children:i})}),e.jsx("p",{className:t(s.styles[`${o}size`]),children:c}),n==="error"&&l&&e.jsx(f.HelperText,{hideIcon:!0,appearance:"negative",size:"sm",className:t(s.styles[`${o}error`]),children:l})]}),e.jsxs("div",{className:t(s.styles[`${o}content-end`]),children:[n in p&&p[n]&&e.jsx("div",{className:t(s.styles[`${o}status`]),children:e.jsx(_.Icon,{...p[n],size:"sm"})}),e.jsx(L.CloseButton,{size:"sm",disabled:g,onClick:a,className:t(s.styles[`${o}remove`])})]})]}),(n==="uploading"||n==="success")&&e.jsx(M.ProgressBar,{size:"sm",value:x,state:n==="success"?"success":"active",fullWidth:!0,"aria-label":`${x}%`,className:t(s.styles[`${o}progress-bar`])})]})}exports.FileUploadListItemComponent=Z;

package/lib/FileUpload/FileUpload.List.Item.d.ts

@@ -0,0 +1,49 @@
+import { FileUploadListSize, FileUploadListItemState } from '@viasat/beam-shared/components/fileUpload';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { default as React } from 'react';
+export interface FileUploadListItemProps extends React.ComponentProps<'div'> {
+    /**
+     * Specify error text and display error state of list item
+     */
+    error?: string;
+    /**
+     * The name of the uploaded file
+     */
+    fileName?: string;
+    /**
+     * The size of the uploaded file
+     */
+    fileSize?: string;
+    /**
+     * Specify a callback when the item is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Specify the size of the item
+     * @default 'md'
+     */
+    size?: FileUploadListSize;
+    /**
+     * Specify if the item displays a default thumbnail or a preview of the image being uploaded. Image only displays for size lg.
+     * @default false
+     */
+    thumbnail?: string | boolean;
+    /**
+     * Specify the status of the file
+     * @default 'uploaded'
+     */
+    state?: FileUploadListItemState;
+    /**
+     * Specify the progress of the file upload
+     */
+    progress?: number;
+    /**
+     * Specify the theme of the FileUpload. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify if the FileUpload is disabled
+     */
+    disabled?: boolean;
+}
+export declare function FileUploadListItemComponent({ error, fileName, fileSize, onDismiss, size: itemSize, thumbnail: itemThumbnail, state, progress, theme, className: _className, disabled: _disabled, ...props }: FileUploadListItemProps): import("react/jsx-runtime").JSX.Element;

package/lib/FileUpload/FileUpload.List.Item.es.js

@@ -0,0 +1,116 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { g as R } from "../../chunks/classNames.DNsS4J__.js";
+import { t as L } from "../../chunks/constants.BBi77pmH.js";
+import * as i from "react";
+import M, { useContext as U, useState as V } from "react";
+import { s as e } from "../../chunks/fileUpload.module.Ck0Nfc4j.js";
+import o from "clsx";
+import { CloseButton as y } from "../CloseButton/CloseButton.es.js";
+import { ProgressBar as W } from "../ProgressBar/ProgressBar.es.js";
+import { H as j, S as k, c as D } from "../../chunks/form.context.CNWjF5qA.js";
+import { Icon as x } from "../Icon/Icon.es.js";
+import { Tooltip as Z } from "../Tooltip/Tooltip.es.js";
+import { FileUploadListContext as q } from "./FileUploadListContext.es.js";
+import { f as A, g as G } from "../../chunks/tokens.CXaNS8Cf.js";
+const J = (r) => /* @__PURE__ */ i.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ i.createElement("g", { clipPath: "url(#clip0_501_2445)" }, /* @__PURE__ */ i.createElement("path", { d: "M14 2H6C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z", fill: "currentColor" })), /* @__PURE__ */ i.createElement("defs", null, /* @__PURE__ */ i.createElement("clipPath", { id: "clip0_501_2445" }, /* @__PURE__ */ i.createElement("rect", { width: 24, height: 24, fill: "none" })))), { baseClassNamePrefix: K, classModifierPrefix: m, subElementClassPrefix: l } = R("file-upload-list-item"), d = {
+  error: { customIconColor: G, icon: D },
+  success: {
+    customIconColor: A,
+    icon: k
+  }
+};
+function me({
+  error: r,
+  fileName: a,
+  fileSize: $,
+  onDismiss: b,
+  size: N = "md",
+  thumbnail: E,
+  state: t = "uploaded",
+  progress: p = 0,
+  theme: f,
+  className: z,
+  disabled: I,
+  ...S
+}) {
+  const { ctxSize: F, ctxThumbnail: u, ctxDisabled: H } = U(q), h = F ?? N, n = u === !1 ? !1 : E ?? u ?? !1, C = I ?? H, w = o(
+    e[K],
+    f && L(f),
+    e[`${m}${h}`],
+    e[`${m}${t}`],
+    C && e[`${m}disabled`],
+    z
+  ), v = M.useRef(null), [P, g] = V(!1), T = (_) => {
+    const { offsetWidth: B = 0, scrollWidth: O = 0 } = v.current ?? {};
+    B < O ? g(_) : g(!1);
+  };
+  return /* @__PURE__ */ c("div", { className: w, ...S, children: [
+    n && /* @__PURE__ */ s("div", { className: o(e[`${l}thumbnail`]), children: n === !0 ? /* @__PURE__ */ s(
+      x,
+      {
+        color: "secondary",
+        icon: J,
+        size: h === "md" ? "sm" : "md"
+      }
+    ) : /* @__PURE__ */ s("img", { src: n, alt: a }) }),
+    /* @__PURE__ */ c("div", { className: o(e[`${l}content`]), children: [
+      /* @__PURE__ */ c("div", { className: o(e[`${l}content-start`]), children: [
+        /* @__PURE__ */ s(
+          Z,
+          {
+            text: a,
+            portalled: !0,
+            placement: "top",
+            onOpenChange: T,
+            open: P,
+            children: /* @__PURE__ */ s(
+              "p",
+              {
+                className: o(e[`${l}filename`]),
+                ref: v,
+                children: a
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ s("p", { className: o(e[`${l}size`]), children: $ }),
+        t === "error" && r && /* @__PURE__ */ s(
+          j,
+          {
+            hideIcon: !0,
+            appearance: "negative",
+            size: "sm",
+            className: o(e[`${l}error`]),
+            children: r
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c("div", { className: o(e[`${l}content-end`]), children: [
+        t in d && d[t] && /* @__PURE__ */ s("div", { className: o(e[`${l}status`]), children: /* @__PURE__ */ s(x, { ...d[t], size: "sm" }) }),
+        /* @__PURE__ */ s(
+          y,
+          {
+            size: "sm",
+            disabled: C,
+            onClick: b,
+            className: o(e[`${l}remove`])
+          }
+        )
+      ] })
+    ] }),
+    (t === "uploading" || t === "success") && /* @__PURE__ */ s(
+      W,
+      {
+        size: "sm",
+        value: p,
+        state: t === "success" ? "success" : "active",
+        fullWidth: !0,
+        "aria-label": `${p}%`,
+        className: o(e[`${l}progress-bar`])
+      }
+    )
+  ] });
+}
+export {
+  me as FileUploadListItemComponent
+};

package/lib/FileUpload/FileUpload.List.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),u=require("react"),f=require("../../chunks/constants.hwjHOsvT.js"),q=require("./FileUploadListContext.cjs.js"),x=require("clsx"),L=require("../../chunks/classNames.DAeKwerT.js"),l=require("../../chunks/fileUpload.module.CYse7_N5.js"),p=require("./FileUpload.List.Item.cjs.js"),N=require("./FileUploadContext.cjs.js"),{baseClassNamePrefix:y,classModifierPrefix:d}=L.getBEMClassNames("file-upload-list"),c=({children:t,thumbnail:U=!1,size:r="md",theme:i,className:C,disabled:n})=>{const _=x(l.styles[y],i&&f.themeClassName(i),l.styles[`${d}${r}`],n&&l.styles[`${d}disabled`],C),{ctxFileItems:o,ctxDismissFile:s}=u.useContext(N.FileUploadContext)??{},b=u.useMemo(()=>typeof t=="function"?o==null?void 0:o.map(e=>t(e,()=>s==null?void 0:s(e))):typeof t>"u"?o==null?void 0:o.map(e=>a.jsx(p.FileUploadListItemComponent,{fileName:e.fileName,fileSize:e.fileSize,error:e.error,thumbnail:e.thumbnail,state:e.state,progress:e.progress,onDismiss:()=>s==null?void 0:s(e)},e.id)):t,[t,s,o]);return a.jsx("div",{className:_,children:a.jsx(q.FileUploadListProvider,{value:{ctxThumbnail:U,ctxSize:r,ctxDisabled:n},children:b})})},m=c;m.Item=p.FileUploadListItemComponent;exports.FileUploadListComponent=c;exports.default=m;

package/lib/FileUpload/FileUpload.List.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { FileItem, FileUploadListSize } from '@viasat/beam-shared/components/fileUpload';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { FileUploadListItemComponent } from './FileUpload.List.Item';
+export interface FileUploadListProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * Add List items to create a FileUpload.List
+     */
+    children?: React.ReactNode | ((file: FileItem, dismissFile: () => void) => React.ReactNode);
+    /**
+     * Specify if the all items displays with a default thumbnail or a preview of the image being uploaded. Image only displays for size lg.
+     * @default false
+     */
+    thumbnail?: boolean;
+    /**
+     * Specify FileUpload List size
+     * @default 'md'
+     */
+    size?: FileUploadListSize;
+    /**
+     * Specify the theme of the FileUpload. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify if the FileUpload List is disabled
+     */
+    disabled?: boolean;
+}
+export declare const FileUploadListComponent: ({ children, thumbnail, size, theme, className: _className, disabled, }: FileUploadListProps) => import("react/jsx-runtime").JSX.Element;
+type FileUploadListType = typeof FileUploadListComponent & {
+    Item: typeof FileUploadListItemComponent;
+};
+declare const List: FileUploadListType;
+export default List;