@viasat/beam-react 2.0.0

package/lib/StateLayer/StateLayer.es.js

@@ -0,0 +1,30 @@
+import "../../assets/StateLayer.css";
+import { jsx as y } from "react/jsx-runtime";
+import { g as h } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import b from "clsx";
+const s = {
+  "bm-state-layer": "bm-state-layer",
+  "bm-state-layer--without-hover": "bm-state-layer--without-hover",
+  "bm-state-layer--without-active": "bm-state-layer--without-active",
+  "bm-state-layer--with-focus-within": "bm-state-layer--with-focus-within",
+  "bm-state-layer--without-focus-visible-within": "bm-state-layer--without-focus-visible-within",
+  "bm-state-layer--without-disabled": "bm-state-layer--without-disabled"
+}, { baseClassNamePrefix: i } = h("state-layer");
+function p({
+  className: r,
+  without: t = [],
+  with: a = []
+}) {
+  const o = Array.isArray(t) ? t : [t], m = Array.isArray(a) ? a : [a], l = b(
+    s[`${i}`],
+    ...o.map((e) => s[`${i}--without-${e}`]),
+    ...m.map((e) => s[`${i}--with-${e}`]),
+    r
+  );
+  return /* @__PURE__ */ y("span", { "aria-hidden": !0, className: l });
+}
+export {
+  p as StateLayer,
+  p as default
+};

package/lib/StateLayer/index.cjs.js

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

package/lib/StateLayer/index.d.ts

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

package/lib/StateLayer/index.es.js

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

package/lib/Stepper/Stepper.Body.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const a=require("clsx"),l=require("../../chunks/stepper.module.B6DIBv0A.js"),{subElementClassPrefix:n}=c.getBEMClassNames("stepper"),u=`${n}body`,i=({children:e,className:s,...t})=>{const r=a(l.styles[u],s);return o.jsx("div",{className:r,...t,children:e})};exports.StepperBody=i;

package/lib/Stepper/Stepper.Body.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export type StepperBodyProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const StepperBody: React.FC<StepperBodyProps>;

package/lib/Stepper/Stepper.Body.es.js

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import { g as m } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import a from "clsx";
+import { s as p } from "../../chunks/stepper.module.BbV81plY.js";
+const { subElementClassPrefix: l } = m("stepper"), c = `${l}body`, d = ({
+  children: s,
+  className: o,
+  ...t
+}) => {
+  const e = a(p[c], o);
+  return /* @__PURE__ */ r("div", { className: e, ...t, children: s });
+};
+export {
+  d as StepperBody
+};

package/lib/Stepper/Stepper.Context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),r=require("../../chunks/stepper.Dv0fTQr3.js"),e=t.createContext({ctxOrientation:r.StepperOrientations.Horizontal}),o=e.Provider;exports.StepperContext=e;exports.StepperProvider=o;

package/lib/Stepper/Stepper.Context.d.ts

@@ -0,0 +1,6 @@
+import { StepperOrientation } from '@viasat/beam-shared/components/stepper';
+export interface StepperContextValue {
+    ctxOrientation: StepperOrientation;
+}
+export declare const StepperContext: import('react').Context<StepperContextValue>;
+export declare const StepperProvider: import('react').Provider<StepperContextValue>;

package/lib/Stepper/Stepper.Context.es.js

@@ -0,0 +1,9 @@
+import { createContext as t } from "react";
+import { S as r } from "../../chunks/stepper.C_I6_cLs.js";
+const e = t({
+  ctxOrientation: r.Horizontal
+}), n = e.Provider;
+export {
+  e as StepperContext,
+  n as StepperProvider
+};

package/lib/Stepper/Stepper.Heading.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("../../chunks/stepper.module.B6DIBv0A.js"),l=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const o=require("clsx"),{subElementClassPrefix:u}=l.getBEMClassNames("stepper"),t=`${u}heading`,p=`${t}--`,m=({className:r,children:a,onClick:e,...n})=>{const i=o(s.styles[t],e&&s.styles[`${p}interactive`],r);return c.jsx("span",{className:i,onClick:e,...n,children:a})};exports.StepperHeading=m;

package/lib/Stepper/Stepper.Heading.d.ts

@@ -0,0 +1,2 @@
+export type StepperStepProps = React.ComponentPropsWithoutRef<'span'>;
+export declare const StepperHeading: ({ className: _className, children, onClick, ...props }: StepperStepProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Stepper/Stepper.Heading.es.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import { s as e } from "../../chunks/stepper.module.BbV81plY.js";
+import { g as p } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import n from "clsx";
+const { subElementClassPrefix: c } = p("stepper"), t = `${c}heading`, l = `${t}--`, N = ({
+  className: r,
+  children: a,
+  onClick: s,
+  ...o
+}) => {
+  const m = n(
+    e[t],
+    s && e[`${l}interactive`],
+    r
+  );
+  return /* @__PURE__ */ i("span", { className: m, onClick: s, ...o, children: a });
+};
+export {
+  N as StepperHeading
+};

package/lib/Stepper/Stepper.Marker.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),b=require("clsx"),g=require("../../chunks/Check.CR4kqxW9.js"),y=require("react"),S=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const o=require("../../chunks/stepper.module.B6DIBv0A.js"),c=require("../../chunks/stepper.Dv0fTQr3.js");function v(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const i=v(y),j=e=>i.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},i.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M14 3H10V15H14V3ZM12 21C13.1046 21 14 20.1046 14 19C14 17.8954 13.1046 17 12 17C10.8954 17 10 17.8954 10 19C10 20.1046 10.8954 21 12 21Z",fill:"currentColor"})),{subElementClassPrefix:x}=S.getBEMClassNames("stepper"),p=`${x}marker`,u=`${p}--`,C=({children:e,status:t,className:r,"aria-label":s,onClick:a,...m})=>{const d=!e,f=b(o.styles[p],d&&o.styles[`${u}marker-only`],a&&o.styles[`${u}interactive`],r);let n=e;return t===c.StepperStatuses.Complete&&(n=l.jsx(g.SvgCheck,{})),t===c.StepperStatuses.Error&&(n=l.jsx(j,{})),l.jsx("button",{className:f,type:"button","aria-label":s,onClick:a,disabled:!a,tabIndex:a?void 0:-1,...m,children:n})};exports.StepperMarker=C;

package/lib/Stepper/Stepper.Marker.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { StepperStatus } from '@viasat/beam-shared/components/stepper';
+export interface StepperMarkerProps extends React.ComponentPropsWithoutRef<'button'> {
+    /**
+     * Specify the status of the StepperMarker. It can be "incomplete" | "current" | "complete" | "error"
+     */
+    status: StepperStatus;
+}
+export declare const StepperMarker: ({ children, status, "className": _className, "aria-label": ariaLabel, onClick, ...props }: StepperMarkerProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Stepper/Stepper.Marker.es.js

@@ -0,0 +1,40 @@
+import { jsx as s } from "react/jsx-runtime";
+import b from "clsx";
+import { S as g } from "../../chunks/Check.DrrmNVhJ.js";
+import * as l from "react";
+import { g as C } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as o } from "../../chunks/stepper.module.BbV81plY.js";
+import { a as m } from "../../chunks/stepper.C_I6_cLs.js";
+const u = (e) => /* @__PURE__ */ l.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 3H10V15H14V3ZM12 21C13.1046 21 14 20.1046 14 19C14 17.8954 13.1046 17 12 17C10.8954 17 10 17.8954 10 19C10 20.1046 10.8954 21 12 21Z", fill: "currentColor" })), { subElementClassPrefix: x } = C("stepper"), n = `${x}marker`, i = `${n}--`, k = ({
+  children: e,
+  status: a,
+  className: p,
+  "aria-label": c,
+  onClick: r,
+  ...f
+}) => {
+  const d = !e, v = b(
+    o[n],
+    d && o[`${i}marker-only`],
+    r && o[`${i}interactive`],
+    p
+  );
+  let t = e;
+  return a === m.Complete && (t = /* @__PURE__ */ s(g, {})), a === m.Error && (t = /* @__PURE__ */ s(u, {})), /* @__PURE__ */ s(
+    "button",
+    {
+      className: v,
+      type: "button",
+      "aria-label": c,
+      onClick: r,
+      disabled: !r,
+      tabIndex: r ? void 0 : -1,
+      ...f,
+      children: t
+    }
+  );
+};
+export {
+  k as StepperMarker
+};

package/lib/Stepper/Stepper.Step.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("clsx"),N=require("react"),j=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const e=require("../../chunks/stepper.module.B6DIBv0A.js"),a=require("../../chunks/stepper.Dv0fTQr3.js"),g=require("./Stepper.Marker.cjs.js"),f=require("./Stepper.Context.cjs.js"),M=require("./Stepper.Heading.cjs.js"),W=require("./Stepper.Body.cjs.js"),{subElementClassPrefix:c}=j.getBEMClassNames("stepper"),u=`${c}step`,o=`${u}--`,$=`${c}marker-wrapper`,S=`${$}--`,y=`${c}content-wrapper`,l=`${y}--`,v=C=>{const{ctxOrientation:t}=N.useContext(f.StepperContext),{status:n=a.StepperStatuses.Incomplete,className:x,children:p,onClick:d,style:_,"aria-label":h,markerContent:s,heading:m}=C;if(t===a.StepperOrientations.Horizontal&&p&&!m)throw new Error("StepperStep: Horizontal orientation requires a heading prop when children are provided.");const k=i(e.styles[u],e.styles[`${o}${n}`],e.styles[`${o}${t}`],{[`${o}marker-only`]:!s},x),q=i(e.styles[$],e.styles[`${S}${t}`],{[`${S}marker-only`]:!s}),b=i(e.styles[y],e.styles[`${l}${t}`],e.styles[`${l}${n}`],{[`${l}marker-only`]:!s});return r.jsxs("li",{className:k,style:_,children:[r.jsxs("div",{className:q,children:[r.jsx(g.StepperMarker,{status:n,onClick:d,"aria-label":h,children:s}),r.jsxs("div",{children:[r.jsx(M.StepperHeading,{onClick:d,children:m}),t===a.StepperOrientations.Horizontal?r.jsx(W.StepperBody,{children:p}):null]})]}),r.jsx("div",{className:b,children:t===a.StepperOrientations.Vertical?p:null})]})};exports.StepperStep=v;

package/lib/Stepper/Stepper.Step.d.ts

@@ -0,0 +1,24 @@
+import { StepperStatus } from '@viasat/beam-shared/components/stepper';
+export interface StepperStepProps extends React.ComponentPropsWithoutRef<'li'> {
+    /**
+     * Specify the heading text for Stepper
+     */
+    heading?: React.ReactNode;
+    /**
+     * Specify the body text for horizontal Stepper or custom content for vertical Stepper
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify icons or numbers for the marker
+     */
+    markerContent?: string | React.ReactNode;
+    /**
+     * Specify if step is interactive
+     */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Specify the status of a step
+     */
+    status?: StepperStatus;
+}
+export declare const StepperStep: (props: StepperStepProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Stepper/Stepper.Step.es.js

@@ -0,0 +1,56 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import i from "clsx";
+import { useContext as g } from "react";
+import { g as w } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as r } from "../../chunks/stepper.module.BbV81plY.js";
+import { a as v, S as p } from "../../chunks/stepper.C_I6_cLs.js";
+import { StepperMarker as B } from "./Stepper.Marker.es.js";
+import { StepperContext as H } from "./Stepper.Context.es.js";
+import { StepperHeading as M } from "./Stepper.Heading.es.js";
+import { StepperBody as z } from "./Stepper.Body.es.js";
+const { subElementClassPrefix: c } = w("stepper"), C = `${c}step`, l = `${C}--`, h = `${c}marker-wrapper`, f = `${h}--`, S = `${c}content-wrapper`, m = `${S}--`, F = (k) => {
+  const { ctxOrientation: e } = g(H), {
+    status: s = v.Incomplete,
+    className: N,
+    children: o,
+    onClick: d,
+    style: u,
+    "aria-label": x,
+    markerContent: a,
+    heading: $
+  } = k;
+  if (e === p.Horizontal && o && !$)
+    throw new Error(
+      "StepperStep: Horizontal orientation requires a heading prop when children are provided."
+    );
+  const y = i(
+    r[C],
+    r[`${l}${s}`],
+    r[`${l}${e}`],
+    { [`${l}marker-only`]: !a },
+    N
+  ), W = i(
+    r[h],
+    r[`${f}${e}`],
+    { [`${f}marker-only`]: !a }
+  ), b = i(
+    r[S],
+    r[`${m}${e}`],
+    r[`${m}${s}`],
+    { [`${m}marker-only`]: !a }
+  );
+  return /* @__PURE__ */ n("li", { className: y, style: u, children: [
+    /* @__PURE__ */ n("div", { className: W, children: [
+      /* @__PURE__ */ t(B, { status: s, onClick: d, "aria-label": x, children: a }),
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ t(M, { onClick: d, children: $ }),
+        e === p.Horizontal ? /* @__PURE__ */ t(z, { children: o }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: b, children: e === p.Vertical ? o : null })
+  ] });
+};
+export {
+  F as StepperStep
+};

package/lib/Stepper/Stepper.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("react"),d=require("clsx"),i=require("../../chunks/stepper.module.B6DIBv0A.js"),q=require("../../chunks/constants.hwjHOsvT.js"),m=require("../../chunks/classNames.DAeKwerT.js"),r=require("../../chunks/stepper.Dv0fTQr3.js"),x=require("./Stepper.Marker.cjs.js"),b=require("./Stepper.Step.cjs.js"),M=require("./Stepper.Body.cjs.js"),g=require("./Stepper.Heading.cjs.js"),s=require("./Stepper.Context.cjs.js"),{baseClassNamePrefix:n}=m.getBEMClassNames("stepper");function e({theme:p,className:a,orientation:t=r.StepperOrientations.Horizontal,children:S,...u}){const c=d(i.styles[n],p&&q.themeClassName(p),i.styles[`${n}--${t}`],a),l=_.useMemo(()=>({ctxOrientation:t}),[t]);return o.jsx(s.StepperProvider,{value:l,children:o.jsx("ol",{className:c,...u,children:S})})}e.Marker=x.StepperMarker;e.Step=b.StepperStep;e.Heading=g.StepperHeading;e.Body=M.StepperBody;e.Context=s.StepperContext;e.Provider=s.StepperProvider;e.Statuses=r.StepperStatuses;e.Orientations=r.StepperOrientations;exports.Stepper=e;exports.default=e;

package/lib/Stepper/Stepper.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { StepperOrientation } from '@viasat/beam-shared/components/stepper';
+export interface StepperProps extends ComponentPropsWithoutRef<'ol'> {
+    /**
+     * Specify the theme of the Stepper. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the orientation of the Stepper
+     */
+    orientation: StepperOrientation;
+    /**
+     * Provide steps to Stepper
+     */
+    children: React.ReactNode;
+}
+export declare function Stepper({ theme, className: _className, orientation, children, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Stepper {
+    var Marker: ({ children, status, "className": _className, "aria-label": ariaLabel, onClick, ...props }: import("./Stepper.Marker").StepperMarkerProps) => import("react/jsx-runtime").JSX.Element;
+    var Step: (props: import("./Stepper.Step").StepperStepProps) => import("react/jsx-runtime").JSX.Element;
+    var Heading: ({ className: _className, children, onClick, ...props }: import("./Stepper.Heading").StepperStepProps) => import("react/jsx-runtime").JSX.Element;
+    var Body: import("react").FC<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>;
+    var Context: import("react").Context<import("./Stepper.Context").StepperContextValue>;
+    var Provider: import("react").Provider<import("./Stepper.Context").StepperContextValue>;
+    var Statuses: {
+        readonly Incomplete: "incomplete";
+        readonly Current: "current";
+        readonly Complete: "complete";
+        readonly Error: "error";
+    };
+    var Orientations: {
+        readonly Horizontal: "horizontal";
+        readonly Vertical: "vertical";
+    };
+}
+export default Stepper;

package/lib/Stepper/Stepper.es.js

@@ -0,0 +1,43 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import d from "clsx";
+import { s as p } from "../../chunks/stepper.module.BbV81plY.js";
+import { t as u } from "../../chunks/constants.BBi77pmH.js";
+import { g as x } from "../../chunks/classNames.DNsS4J__.js";
+import { S as m, a as C } from "../../chunks/stepper.C_I6_cLs.js";
+import { StepperMarker as N } from "./Stepper.Marker.es.js";
+import { StepperStep as g } from "./Stepper.Step.es.js";
+import { StepperBody as M } from "./Stepper.Body.es.js";
+import { StepperHeading as v } from "./Stepper.Heading.es.js";
+import { StepperProvider as a, StepperContext as y } from "./Stepper.Context.es.js";
+const { baseClassNamePrefix: s } = x("stepper");
+function e({
+  theme: t,
+  className: i,
+  orientation: r = m.Horizontal,
+  children: f,
+  ...n
+}) {
+  const S = d(
+    p[s],
+    t && u(t),
+    p[`${s}--${r}`],
+    i
+  ), l = c(
+    () => ({ ctxOrientation: r }),
+    [r]
+  );
+  return /* @__PURE__ */ o(a, { value: l, children: /* @__PURE__ */ o("ol", { className: S, ...n, children: f }) });
+}
+e.Marker = N;
+e.Step = g;
+e.Heading = v;
+e.Body = M;
+e.Context = y;
+e.Provider = a;
+e.Statuses = C;
+e.Orientations = m;
+export {
+  e as Stepper,
+  e as default
+};

package/lib/Stepper/index.cjs.js

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

package/lib/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './useBeamStepper';

package/lib/Stepper/index.es.js

@@ -0,0 +1,7 @@
+import { Stepper as r } from "./Stepper.es.js";
+import { processMetadata as o, useBeamStepper as a } from "./useBeamStepper.es.js";
+export {
+  r as Stepper,
+  o as processMetadata,
+  a as useBeamStepper
+};

package/lib/Stepper/useBeamStepper.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react/jsx-runtime"),S=require("react"),T=require("../../chunks/stepper.Dv0fTQr3.js"),l=require("./Stepper.cjs.js");function F(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const M=F(S);function H(...e){return{getAll:()=>e,get:t=>e.find(r=>r.id===t),getIndex:t=>e.findIndex(r=>r.id===t),getByIndex:t=>e[t],getFirst:()=>e[0],getLast:()=>e[e.length-1],getNext:t=>e[e.findIndex(r=>r.id===t)+1],getPrev:t=>e[e.findIndex(r=>r.id===t)-1],getNeighbors(t){const r=e.findIndex(a=>a.id===t);return{prev:r>0?e[r-1]:null,next:r<e.length-1?e[r+1]:null}}}}function O(e,t){return Math.max(e.findIndex(r=>r.id===t),0)}function $(e,t){return e.reduce((r,a)=>(r[a.id]=(t==null?void 0:t[a.id])??null,r),{})}function L(e,t,r){return{switch(a){const i=a[t.id];return i==null?void 0:i(t)},when(a,i,s){const o=e[r];return(Array.isArray(a)?o.id===a[0]&&a.slice(1).every(Boolean):o.id===a)?i==null?void 0:i(o):s==null?void 0:s(o)},match(a,i){const s=e[r],o=e.find(p=>p.id===a);if((o==null?void 0:o.id)===s.id){const p=i[a];return p==null?void 0:p(o)}return null}}}async function _(e,t){const r=await e();return!t||r===!0}var I=async({stepper:e,direction:t,callback:r,before:a,targetId:i})=>{(!a||await _(r,!0))&&(t==="next"?e.next():t==="prev"?e.prev():t==="goTo"&&i&&e.goTo(i),a||await _(r,!1))},m=(e,t,r)=>{t<0&&A({steps:e,newIndex:t,direction:"next",reason:"it is the first step"}),t>=e.length&&A({steps:e,newIndex:t,direction:"prev",reason:"it is the last step"}),r(t)},A=({steps:e,newIndex:t,direction:r,reason:a})=>{throw new Error(`Cannot navigate ${r} from step "${e[t].id}": ${a}`)},W=(...e)=>{const t=M.createContext(null),r=H(...e),a=i=>{const{initialStep:s,initialMetadata:o}=i??{},p=M.useMemo(()=>O(e,s),[s]),[d,y]=M.useState(p),[x,v]=M.useState(()=>$(e,o)),f=M.useMemo(()=>{const h=e[d],C=d===e.length-1;return{all:e,current:h,isLast:C,isFirst:d===0,metadata:x,setMetadata(n,u){v(g=>g[n]===u?g:{...g,[n]:u})},getMetadata:n=>x[n],resetMetadata(n){v($(e,n?o:void 0))},next(){m(e,d+1,n=>{y(n)})},prev(){m(e,d-1,n=>{y(n)})},get:n=>e.find(u=>u.id===n),goTo(n){const u=e.findIndex(g=>g.id===n);if(u===-1)throw new Error(`Step with id "${n}" not found.`);m(e,u,g=>{y(g)})},reset(){m(e,O(e,s),n=>{y(n)})},async beforeNext(n){await I({stepper:f,direction:"next",callback:n,before:!0})},async afterNext(n){this.next(),await I({stepper:f,direction:"next",callback:n,before:!1})},async beforePrev(n){await I({stepper:f,direction:"prev",callback:n,before:!0})},async afterPrev(n){this.prev(),await I({stepper:f,direction:"prev",callback:n,before:!1})},async beforeGoTo(n,u){await I({stepper:f,direction:"goTo",callback:u,before:!0,targetId:n})},async afterGoTo(n,u){this.goTo(n),await I({stepper:f,direction:"goTo",callback:u,before:!1,targetId:n})},...L(e,h,d)}},[d,x]);return f};return{steps:e,utils:r,Scoped:({initialStep:i,initialMetadata:s,children:o})=>M.createElement(t.Provider,{value:a({initialStep:i,initialMetadata:s})},o),useStepper:(i={})=>M.useContext(t)??a(i)}};const J=e=>{const t=({children:r,...a})=>N.jsx(l.Stepper,{...a,children:N.jsx(e,{children:r})});return t.Step=l.Stepper.Step,t.Marker=l.Stepper.Marker,t.Heading=l.Stepper.Heading,t.Body=l.Stepper.Body,t.Context=l.Stepper.Context,t.Provider=l.Stepper.Provider,t.Statuses=l.Stepper.Statuses,t.displayName="Stepper",t},K=(e,t)=>{const{Scoped:r,useStepper:a,utils:i}=S.useMemo(()=>W(...e),[e]),{initialStep:s,initialMetadata:o,skipSteps:p,validateStep:d}=t,y=S.useMemo(()=>E(e,o||{}),[e,o]),x=a({initialStep:s,initialMetadata:y}),{current:v,getMetadata:f,setMetadata:h,beforeGoTo:C}=x,n=i.getNeighbors(v.id),u=S.useCallback(async c=>d?d(c):!0,[d]),g=S.useCallback(c=>{var b,w;return p?!0:[(b=n.next)==null?void 0:b.id,(w=n.prev)==null?void 0:w.id].includes(c)},[n.next,n.prev,p]),q=S.useCallback(c=>{var w;return((w=f(c))==null?void 0:w.status)||l.Stepper.Statuses.Incomplete},[f]),k=S.useCallback(c=>{C(c,async()=>{if(!g(c))return!1;let w=!1;try{w=await u(v.id)}catch{console.error("[Beam Stepper]: An error occurred while validating the step transition, check the validateTransition callback.")}if(!w)return h(v.id,{status:l.Stepper.Statuses.Error}),!1;const j=i.getIndex(v.id),B=i.getIndex(c);if(B<j){h(c,{status:l.Stepper.Statuses.Current});for(let P=B+1;P<=j;P++){const D=i.getByIndex(P);h(D.id,{status:l.Stepper.Statuses.Incomplete})}}else h(v.id,{status:l.Stepper.Statuses.Complete}),h(c,{status:l.Stepper.Statuses.Current});return!0})},[v,C,g,h,u,i]),G=S.useCallback(()=>{var c,b;return(c=n.next)!=null&&c.id?k((b=n.next)==null?void 0:b.id):null},[n.next,k]),R=S.useCallback(()=>{var c,b;return(c=n.prev)!=null&&c.id?k((b=n.prev)==null?void 0:b.id):null},[n.prev,k]),z=S.useCallback(()=>{x.reset(),x.resetMetadata(!0)},[x]);return{Stepper:S.useMemo(()=>J(r),[r]),...x,utils:i,resetStepper:z,getStatus:q,goToStep:k,goToNextStep:G,goToPrevStep:R}},E=(e,t={})=>{var i;const r=e.reduce((s,o)=>{var p;return s=s||{},s[o.id]?s[o.id]={...s[o.id],status:((p=s[o.id])==null?void 0:p.status)||o.status||T.StepperStatuses.Incomplete}:s[o.id]={status:o.status||T.StepperStatuses.Incomplete},s},t),a=Object.values(r).filter(s=>(s==null?void 0:s.status)===T.StepperStatuses.Current);if(a.length>1)throw new Error("More than one status set to `current`");return a.length===0&&((r[i=e[0].id]??(r[i]={})).status=T.StepperStatuses.Current),r};exports.processMetadata=E;exports.useBeamStepper=K;

package/lib/Stepper/useBeamStepper.d.ts

@@ -0,0 +1,95 @@
+import { ScopedProps } from '@stepperize/react';
+import { IconComponentType } from '../../utils/types';
+import { StepperStatus } from '@viasat/beam-shared/components/stepper';
+import { StepperProps } from './Stepper';
+export interface Step {
+    heading?: string;
+    id: string;
+    markerContent?: IconComponentType | number | string;
+    status?: StepperStatus;
+    body?: React.ReactNode | string;
+}
+export type Metadata = ScopedProps<Step[]>['initialMetadata'];
+/**
+ * Stepper initialization config.
+ */
+export interface Config {
+    /**
+     * The id of the step to start with.
+     */
+    initialStep?: string;
+    /**
+     * Optional server-driven metadata for steps. Use this to resume the stepper in a specific state.
+     * The Metadata object is a map of step ids to metadata objects, used for handling the status of the steps - see the processMetadata function.
+     * It can contain any additional data you want to associate with the step.
+     */
+    initialMetadata?: Metadata;
+    /**
+     * If true, navigation is not restricted to immediate neighbors.
+     */
+    skipSteps?: boolean;
+    /**
+     * A function to validate the current step before transitioning.
+     */
+    validateStep?: (stepId: string) => Promise<boolean>;
+}
+export declare const useBeamStepper: (steps: Step[], config: Config) => {
+    utils: import('@stepperize/core').Utils<Step[]>;
+    resetStepper: () => void;
+    getStatus: (stepId: string) => any;
+    goToStep: (stepId: string) => void;
+    goToNextStep: () => void | null;
+    goToPrevStep: () => void | null;
+    all: Step[];
+    current: Step;
+    isLast: boolean;
+    isFirst: boolean;
+    next: () => void;
+    prev: () => void;
+    get: <Id extends string>(id: Id) => Extract<Step, {
+        id: Id;
+    }>;
+    goTo: (id: string) => void;
+    reset: () => void;
+    beforeNext: (callback: () => Promise<boolean> | boolean) => Promise<void> | void;
+    afterNext: (callback: () => Promise<void> | void) => Promise<void> | void;
+    beforePrev: (callback: () => Promise<boolean> | boolean) => Promise<void> | void;
+    afterPrev: (callback: () => Promise<void> | void) => Promise<void> | void;
+    beforeGoTo: (id: string, callback: () => Promise<boolean> | boolean) => Promise<void> | void;
+    afterGoTo: (id: string, callback: () => Promise<void> | void) => Promise<void> | void;
+    when: <Id extends string, R1, R2>(id: Id | [Id, ...boolean[]], whenFn: (step: Extract<Step, {
+        id: Id;
+    }>) => R1, elseFn?: ((step: Exclude<Step, {
+        id: Id;
+    }>) => R2) | undefined) => R1 | R2;
+    switch: <R>(when: import("@stepperize/core").Get.Switch<Step[], R>) => R;
+    match: <State extends string, R>(state: State, matches: import("@stepperize/core").Get.Switch<Step[], R>) => R | null;
+    metadata: Record<string, import('@stepperize/core').Metadata>;
+    setMetadata: <M extends import('@stepperize/core').Metadata>(id: string, values: M) => void;
+    getMetadata: <M extends import('@stepperize/core').Metadata>(id: string) => M;
+    resetMetadata: (keepInitialMetadata?: boolean) => void;
+    Stepper: {
+        ({ children, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+        Step: (props: import('./Stepper.Step').StepperStepProps) => import("react/jsx-runtime").JSX.Element;
+        Marker: ({ children, status, "className": _className, "aria-label": ariaLabel, onClick, ...props }: import('./Stepper.Marker').StepperMarkerProps) => import("react/jsx-runtime").JSX.Element;
+        Heading: ({ className: _className, children, onClick, ...props }: import('./Stepper.Heading').StepperStepProps) => import("react/jsx-runtime").JSX.Element;
+        Body: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>;
+        Context: import('react').Context<import('./Stepper.Context').StepperContextValue>;
+        Provider: import('react').Provider<import('./Stepper.Context').StepperContextValue>;
+        Statuses: {
+            readonly Incomplete: "incomplete";
+            readonly Current: "current";
+            readonly Complete: "complete";
+            readonly Error: "error";
+        };
+        displayName: string;
+    };
+};
+/**
+ * This function processes the metadata for the steps in the stepper.
+ * It initializes the status of each step based on the provided metadata and ensures that only one step is marked as "current".
+ * The status of a step can be provided either on the step itself or in the metadata. The metadata takes precedence and it defaults to "incomplete".
+ * If no step is marked as "current", the first step in the list will be set to "current".
+ * If multiple steps are marked as "current", an error will be thrown.
+ */
+export declare const processMetadata: (steps: Step[], metadata?: NonNullable<Metadata>) => Record<string, import('@stepperize/core').Metadata>;