@viasat/beam-react 2.0.0

package/lib/FileUpload/useFileManagement.es.js

@@ -0,0 +1,228 @@
+import { useReducer as g, useCallback as h } from "react";
+import "../../chunks/constants.BBi77pmH.js";
+var C = function(e, r) {
+  if (e && r) {
+    var o = Array.isArray(r) ? r : r.split(",");
+    if (o.length === 0)
+      return !0;
+    var a = e.name || "", t = (e.type || "").toLowerCase(), n = t.replace(/\/.*$/, "");
+    return o.some(function(d) {
+      var i = d.trim().toLowerCase();
+      return i.charAt(0) === "." ? a.toLowerCase().endsWith(i) : i.endsWith("/*") ? n === i.replace(/\/.*$/, "") : t === i;
+    });
+  }
+  return !0;
+};
+const F = {
+  fileItems: [],
+  abortControllers: [],
+  files: [],
+  shouldAddToFormData: [],
+  validFileCount: 0
+};
+function y(e) {
+  return e < 6 ? `${e} B` : e < 1048576 / 2 ? `${(e / 1024).toFixed(2)} KB` : e < 1073741824 / 2 ? `${(e / 1048576).toFixed(2)} MB` : e < 1099511627776 / 2 ? `${(e / 1073741824).toFixed(2)} GB` : `${(e / 1099511627776 / 2).toFixed(2)} TB`;
+}
+const I = (e, r, { accept: o, fileLimit: a, maxFileSize: t }) => {
+  if (o && !C(e, o))
+    return "Incorrect file type";
+  if (a && r >= a)
+    return "Attachment limit reached";
+  if (t && e.size > t)
+    return "File size exceeds limit";
+}, w = (e, {
+  state: r,
+  error: o
+}) => ({
+  id: URL.createObjectURL(e),
+  fileName: e.name,
+  fileSize: y(e.size),
+  state: r ?? "uploaded",
+  progress: 0,
+  error: o
+}), T = (e, r) => {
+  const o = new Image();
+  o.src = URL.createObjectURL(e), o.onload = () => {
+    const a = document.createElement("canvas"), t = a.getContext("2d");
+    t && (a.width = o.width, a.height = o.height, t.drawImage(o, 0, 0), r(a.toDataURL("image/jpeg")));
+  };
+}, L = (e) => URL.createObjectURL(e), b = (e, r) => {
+  const o = document.createElement("video"), a = document.createElement("source"), t = document.createElement("canvas"), n = t.getContext("2d");
+  if (!n)
+    return;
+  o.crossOrigin = "anonymous", o.preload = "metadata", o.appendChild(a), a.src = URL.createObjectURL(e), o.currentTime = 0, o.load(), o.addEventListener("loadedmetadata", () => {
+    t.width = o.videoWidth, t.height = o.videoHeight;
+  });
+  const d = () => {
+    n.drawImage(o, 0, 0, t.width, t.height), r(t.toDataURL("image/jpeg"));
+  };
+  if (typeof o.requestVideoFrameCallback < "u")
+    o.requestVideoFrameCallback(d);
+  else {
+    const i = () => {
+      setTimeout(d, 0), o.removeEventListener("seeked", i);
+    };
+    o.addEventListener("seeked", i);
+  }
+}, x = (e, r) => {
+  if (e.type === "image/gif")
+    return T(e, r);
+  if (e.type.startsWith("image/"))
+    return L(e);
+  if (e.type.startsWith("video/"))
+    return b(e, r);
+};
+function A(e, r) {
+  r({ type: "remove", payload: e });
+}
+function R(e, r, o, a, t, n, d, i) {
+  if (!e)
+    return;
+  let s = o;
+  const u = Array.from(e).map((m) => {
+    const f = I(m, s, {
+      accept: a,
+      fileLimit: t,
+      maxFileSize: n
+    }), l = w(m, {
+      error: f,
+      state: f ? "error" : d ?? "uploaded"
+    }), v = new AbortController();
+    l.thumbnail = x(m, (c) => {
+      r({
+        type: "update",
+        payload: { fileItem: l, updates: { thumbnail: c } }
+      });
+    });
+    let p = !f;
+    return f || (s++, i ? p = (i == null ? void 0 : i(
+      m,
+      {
+        progress(c) {
+          r({
+            type: "update",
+            payload: { fileItem: l, updates: { state: "uploading", progress: c } }
+          });
+        },
+        success() {
+          r({
+            type: "update",
+            payload: { fileItem: l, updates: { state: "success" } }
+          }), setTimeout(() => {
+            r({
+              type: "update",
+              payload: { fileItem: l, updates: { state: "uploaded" } }
+            });
+          }, 3e3);
+        },
+        error(c) {
+          r({
+            type: "update",
+            payload: { fileItem: l, updates: { state: "error", error: c } }
+          });
+        },
+        dismiss() {
+          r({ type: "remove", payload: l });
+        }
+      },
+      v.signal
+    )) ?? !1 : p = !0), { file: m, fileItem: l, abortController: v, shouldAddToFormData: p };
+  });
+  r({ type: "add", payload: u });
+}
+function D(e, r) {
+  var o;
+  switch (r.type) {
+    case "add":
+      return {
+        fileItems: [
+          ...e.fileItems,
+          ...r.payload.map(({ fileItem: a }) => a)
+        ],
+        abortControllers: [
+          ...e.abortControllers,
+          ...r.payload.map(({ abortController: a }) => a)
+        ],
+        files: [...e.files, ...r.payload.map(({ file: a }) => a)],
+        shouldAddToFormData: [
+          ...e.shouldAddToFormData,
+          ...r.payload.map(({ shouldAddToFormData: a }) => a)
+        ],
+        validFileCount: r.payload.reduce(
+          (a, { fileItem: t }) => t.state !== "error" ? a + 1 : a,
+          e.validFileCount
+        )
+      };
+    case "remove": {
+      const { payload: a } = r, t = e.fileItems.findIndex((n) => n.id === a.id);
+      return t < 0 ? e : ((o = e.abortControllers[t]) == null || o.abort(), {
+        fileItems: [
+          ...e.fileItems.slice(0, t),
+          ...e.fileItems.slice(t + 1)
+        ],
+        abortControllers: [
+          ...e.abortControllers.slice(0, t),
+          ...e.abortControllers.slice(t + 1)
+        ],
+        files: [...e.files.slice(0, t), ...e.files.slice(t + 1)],
+        shouldAddToFormData: [
+          ...e.shouldAddToFormData.slice(0, t),
+          ...e.shouldAddToFormData.slice(t + 1)
+        ],
+        validFileCount: e.validFileCount - (a.state !== "error" ? 1 : 0)
+      });
+    }
+    case "update": {
+      const { fileItem: a, updates: t } = r.payload, n = e.fileItems.findIndex((u) => u.id === a.id);
+      if (n < 0)
+        return e;
+      const d = e.fileItems[n].state, i = t.state ?? d;
+      let s = e.validFileCount;
+      return d !== "error" && i === "error" && (s -= 1), d === "error" && i !== "error" && (s += 1), {
+        ...e,
+        fileItems: [
+          ...e.fileItems.slice(0, n),
+          { ...e.fileItems[n], ...t },
+          ...e.fileItems.slice(n + 1)
+        ],
+        validFileCount: s
+      };
+    }
+    default:
+      return e;
+  }
+}
+const j = ({
+  accept: e,
+  fileLimit: r,
+  maxFileSize: o,
+  initialFileItemState: a,
+  onUpload: t
+}) => {
+  const [n, d] = g(D, F), i = h((u) => {
+    A(u, d);
+  }, []), s = h(
+    (u) => R(
+      u,
+      d,
+      n.validFileCount,
+      e,
+      r,
+      o,
+      a,
+      t
+    ),
+    [
+      e,
+      r,
+      n.validFileCount,
+      o,
+      t,
+      a
+    ]
+  );
+  return { filesState: n, addFiles: s, dismissFile: i };
+};
+export {
+  j as useFileManagement
+};

package/lib/Flag/Flag.cjs.js

@@ -0,0 +1 @@
+var y=require("../../assets/Flag.css");Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),d=require("react"),k=require("clsx"),x=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const a={"bm-flag--clickable":"bm-flag--clickable","bm-flag--inline":"bm-flag--inline","bm-flag--inline-block":"bm-flag--inline-block","bm-flag--block":"bm-flag--block","bm-flag--none":"bm-flag--none"},{baseClassNamePrefix:q,classModifierPrefix:s}=x.getBEMClassNames("flag");function o({flag:i,className:r,size:n,display:b="block",role:t,ariaLabel:c,...e}){if(!i)return null;const f=k(a[q],e.onClick&&a[`${s}clickable`],a[`${s}${b}`],r),m={...n&&{width:n},...e.style},l=!!(e.onClick||e.onKeyDown),u=()=>t||(c?"img":"presentation");return g.jsx(i,{className:f,role:u(),focusable:l,tabIndex:l?0:void 0,"aria-hidden":l?void 0:!0,style:m,"aria-label":c,...e})}const v=d.memo(o);exports.Flag=v;exports.default=o;

package/lib/Flag/Flag.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { FlagComponentType } from '../../utils/types';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+export interface FlagProps extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'color'> {
+    /**
+     * Specify which Flag to display
+     */
+    flag: FlagComponentType;
+    /**
+     * Pass maxWidth. The height  will scale proportionally with the width.
+     */
+    size?: string;
+    /**
+     * Specify the display property of the Flag
+     */
+    display?: 'inline' | 'inline-block' | 'block' | 'none';
+    /**
+     * Specify the `aria-label` of the Flag
+     */
+    ariaLabel?: string;
+    /**
+     * Specify the theme of the Flag. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+declare function Flag({ flag: FlagComponent, className: customClassName, size, display, role, ariaLabel, ...props }: FlagProps): import("react/jsx-runtime").JSX.Element | null;
+declare const MemoizedFlag: React.MemoExoticComponent<typeof Flag>;
+export { MemoizedFlag as Flag };
+export default Flag;

package/lib/Flag/Flag.es.js

@@ -0,0 +1,53 @@
+import "../../assets/Flag.css";
+import { jsx as b } from "react/jsx-runtime";
+import g from "react";
+import d from "clsx";
+import { g as k } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+const a = {
+  "bm-flag--clickable": "bm-flag--clickable",
+  "bm-flag--inline": "bm-flag--inline",
+  "bm-flag--inline-block": "bm-flag--inline-block",
+  "bm-flag--block": "bm-flag--block",
+  "bm-flag--none": "bm-flag--none"
+}, { baseClassNamePrefix: u, classModifierPrefix: c } = k("flag");
+function x({
+  flag: i,
+  className: m,
+  size: t,
+  display: s = "block",
+  role: n,
+  ariaLabel: o,
+  ...l
+}) {
+  if (!i) return null;
+  const f = d(
+    a[u],
+    l.onClick && a[`${c}clickable`],
+    a[`${c}${s}`],
+    m
+  ), r = {
+    ...t && {
+      width: t
+    },
+    ...l.style
+  }, e = !!(l.onClick || l.onKeyDown);
+  return /* @__PURE__ */ b(
+    i,
+    {
+      className: f,
+      role: n || (o ? "img" : "presentation"),
+      focusable: e,
+      tabIndex: e ? 0 : void 0,
+      "aria-hidden": e ? void 0 : !0,
+      style: r,
+      "aria-label": o,
+      ...l
+    }
+  );
+}
+const h = g.memo(x);
+export {
+  h as Flag,
+  x as default
+};

package/lib/Flag/index.cjs.js

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

package/lib/Flag/index.d.ts

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

package/lib/Flag/index.es.js

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

package/lib/FloatingUI/FloatingUI.arrow.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),f=require("../../chunks/floatingui.module.D3Aw_aYe.js"),m=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const g=require("clsx"),e=require("react"),q=e.forwardRef(({options:s,middleware:r},t)=>{const{subElementClassPrefix:o}=m.getBEMClassNames("floatingui"),{className:n,hide:a}=s,l=g(f.floatinguiStyles[`${o}arrow`],n),i=e.useRef(null),u=t||i;return a?null:c.jsx("span",{ref:u,style:r.arrowStyles,className:l})});exports.Arrow=q;

package/lib/FloatingUI/FloatingUI.arrow.d.ts

@@ -0,0 +1,11 @@
+import { MiddlewareData } from '@floating-ui/react';
+import { default as React } from 'react';
+export interface ArrowOptions {
+    edgePadding: number;
+    hide: boolean;
+    className?: string;
+}
+export declare const Arrow: React.ForwardRefExoticComponent<{
+    options: ArrowOptions;
+    middleware: MiddlewareData;
+} & React.RefAttributes<HTMLSpanElement>>;

package/lib/FloatingUI/FloatingUI.arrow.es.js

@@ -0,0 +1,20 @@
+import { jsx as n } from "react/jsx-runtime";
+import { f as c } from "../../chunks/floatingui.module.BcBFebz0.js";
+import { g as u } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import p from "clsx";
+import r from "react";
+const y = r.forwardRef(({ options: s, middleware: o }, t) => {
+  const { subElementClassPrefix: e } = u("floatingui"), { className: a, hide: l } = s, f = p(c[`${e}arrow`], a), m = r.useRef(null), i = t || m;
+  return l ? null : /* @__PURE__ */ n(
+    "span",
+    {
+      ref: i,
+      style: o.arrowStyles,
+      className: f
+    }
+  );
+});
+export {
+  y as Arrow
+};

package/lib/FloatingUI/FloatingUI.content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),x=require("../../chunks/FloatingUI.context.BULqADss.js"),f=require("react"),i=require("@floating-ui/react"),m=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const b=require("clsx"),d=require("../../chunks/floatingui.module.D3Aw_aYe.js"),w=require("../Box/Box.cjs.js"),N=require("./FloatingUI.arrow.cjs.js");function S({children:o,props:e}){if(!e)return o;const t=typeof e=="boolean"?{}:e;return a.jsx(i.FloatingPortal,{...t,children:o})}function v({children:o,props:e}){if(!e)return o;const t=typeof e=="boolean",r=e==="transparent",{baseClassNamePrefix:l,classModifierPrefix:c}=m.getBEMClassNames("floatingui__overlay"),u={className:b(d.floatinguiStyles[l],r&&d.floatinguiStyles[`${c}transparent`]),lockScroll:!0},s=t||r?u:{...u,...e};return a.jsx(i.FloatingOverlay,{...s,children:o})}function B({children:o,context:e,props:t}){const r=f.useMemo(()=>({context:e,...typeof t=="boolean"?{}:t}),[e,t]);return t?a.jsx(i.FloatingFocusManager,{...r,children:o}):o}const y=f.forwardRef(({children:o,className:e,style:t,overlay:r,skipFloatingStyles:l=!1,...c},u)=>{const{context:s,nodeId:C,arrow:g,...n}=x.useBmFloatingUIContext(),P=i.useMergeRefs([n.refs.setFloating,u]),{isMounted:_,status:j}=i.useTransitionStatus(s,n.transitionConfig),{baseClassNamePrefix:F}=m.getBEMClassNames("floatingui"),q=l?e:b(d.floatinguiStyles[F],e),I=f.useMemo(()=>({...l?{}:s.floatingStyles,...x.visibilityHandler(s.middlewareData),...t}),[s.floatingStyles,s.middlewareData,l,t]);return _?a.jsx(i.FloatingNode,{id:C,children:a.jsx(S,{props:n.portalled,children:a.jsx(v,{props:r,children:a.jsx(B,{context:s,props:n.focusConfiguration,children:a.jsxs(w.Box,{"data-status":j,ref:P,style:I,className:q,"aria-labelledby":n.labelId,"aria-describedby":n.descriptionId,...n.getFloatingProps(c),children:[o,g&&a.jsx(N.Arrow,{options:g,middleware:n.middlewareData,ref:M=>n.setArrowEl(M)})]})})})})}):null});exports.Content=y;exports.default=y;

package/lib/FloatingUI/FloatingUI.content.d.ts

@@ -0,0 +1,20 @@
+import { FC, PropsWithRef } from 'react';
+import { FloatingFocusManagerProps, FloatingOverlayProps } from '@floating-ui/react';
+import { BoxProps } from '../Box';
+export type Overlay = boolean | FloatingOverlayProps | 'transparent';
+export type FocusManagerProps = Omit<FloatingFocusManagerProps, 'children' | 'context'>;
+export type FloatingUIContentProps = Omit<BoxProps, 'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'shadow' | 'theme' | 'm' | 'mAfter' | 'mBefore' | 'mBottom' | 'mTop' | 'mx' | 'my'> & {
+    /**
+     * Specify if the content should render with an overlay
+     * @default false
+     */
+    overlay?: Overlay;
+    /**
+     * Specify if the content should render with an overlay
+     * and not be positioned relative to the trigger
+     * @default false
+     */
+    skipFloatingStyles?: boolean;
+};
+export declare const Content: FC<PropsWithRef<FloatingUIContentProps>>;
+export default Content;

package/lib/FloatingUI/FloatingUI.content.es.js

@@ -0,0 +1,111 @@
+import { jsx as n, jsxs as M } from "react/jsx-runtime";
+import { a as v, v as I } from "../../chunks/FloatingUI.context.2kPXcTvi.js";
+import c, { useMemo as N } from "react";
+import { useMergeRefs as B, useTransitionStatus as R, FloatingNode as S, FloatingPortal as D, FloatingOverlay as O, FloatingFocusManager as U } from "@floating-ui/react";
+import { g as u } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import g from "clsx";
+import { f as d } from "../../chunks/floatingui.module.BcBFebz0.js";
+import { Box as _ } from "../Box/Box.es.js";
+import { Arrow as h } from "./FloatingUI.arrow.es.js";
+function j({
+  children: o,
+  props: t
+}) {
+  return t ? /* @__PURE__ */ n(D, { ...typeof t == "boolean" ? {} : t, children: o }) : o;
+}
+function A({
+  children: o,
+  props: t
+}) {
+  if (!t)
+    return o;
+  const e = typeof t == "boolean", i = t === "transparent", { baseClassNamePrefix: s, classModifierPrefix: f } = u("floatingui__overlay"), l = {
+    className: g(d[s], i && d[`${f}transparent`]),
+    lockScroll: !0
+  }, r = e || i ? l : { ...l, ...t };
+  return /* @__PURE__ */ n(O, { ...r, children: o });
+}
+function E({
+  children: o,
+  context: t,
+  props: e
+}) {
+  const i = c.useMemo(
+    () => ({
+      context: t,
+      ...typeof e == "boolean" ? {} : e
+    }),
+    [t, e]
+  );
+  return e ? /* @__PURE__ */ n(U, { ...i, children: o }) : o;
+}
+const V = c.forwardRef(
+  ({
+    children: o,
+    className: t,
+    style: e,
+    overlay: i,
+    skipFloatingStyles: s = !1,
+    ...f
+  }, l) => {
+    const {
+      context: r,
+      nodeId: p,
+      arrow: m,
+      ...a
+    } = v(), P = B([a.refs.setFloating, l]), { isMounted: b, status: x } = R(
+      r,
+      a.transitionConfig
+    ), { baseClassNamePrefix: y } = u("floatingui"), C = s ? t : g(d[y], t), w = N(
+      () => ({
+        ...s ? {} : r.floatingStyles,
+        // Use floatingStyles for non-dialog content
+        ...I(r.middlewareData),
+        ...e
+      }),
+      [
+        r.floatingStyles,
+        r.middlewareData,
+        s,
+        e
+      ]
+    );
+    return b ? /* @__PURE__ */ n(S, { id: p, children: /* @__PURE__ */ n(j, { props: a.portalled, children: /* @__PURE__ */ n(A, { props: i, children: /* @__PURE__ */ n(
+      E,
+      {
+        context: r,
+        props: a.focusConfiguration,
+        children: /* @__PURE__ */ M(
+          _,
+          {
+            "data-status": x,
+            ref: P,
+            style: w,
+            className: C,
+            "aria-labelledby": a.labelId,
+            "aria-describedby": a.descriptionId,
+            ...a.getFloatingProps(
+              f
+            ),
+            children: [
+              o,
+              m && /* @__PURE__ */ n(
+                h,
+                {
+                  options: m,
+                  middleware: a.middlewareData,
+                  ref: (F) => a.setArrowEl(F)
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }) }) }) : null;
+  }
+);
+export {
+  V as Content,
+  V as default
+};

package/lib/FloatingUI/FloatingUI.context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");const t=require("../../chunks/FloatingUI.context.BULqADss.js");require("@floating-ui/react");require("./FloatingUI.interactions.cjs.js");exports.BmFloatingUIContext=t.BmFloatingUIContext;exports.useBmFloatingUI=t.useBmFloatingUI;exports.useBmFloatingUIContext=t.useBmFloatingUIContext;