@homebound/beam 2.137.9 → 2.138.0

package/dist/components/Stepper.js

@@ -10,19 +10,14 @@ function Stepper({ steps, currentStep, onChange }) {
     if (steps.length === 0) {
         throw new Error("Stepper must be initialized with at least one step");
     }
-    const [progressBarStep, setProgressBarStep] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        const currentStepIndex = steps.findIndex((s) => s.value === currentStep) || 0;
-        if (currentStepIndex > progressBarStep) {
-            setProgressBarStep(currentStepIndex);
-        }
-    }, [currentStep]);
+    // calc progress based on last completed step - return -1 when no steps completed
+    const lastCompletedStep = steps.map((step) => step.state).lastIndexOf("complete");
     return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.$ }, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.$ }, { children: steps.map((step) => {
                     const isCurrent = currentStep === step.value;
                     return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fdc.wPx(200).$, "aria-current": isCurrent }, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }), void 0) }), step.label));
                 }) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.bgGray300.hPx(4).w(`${steps.length * 200}px`).$ }, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.bgLightBlue600
                         .add("transition", "width 200ms")
-                        .h100.w(`${((progressBarStep + 1) / steps.length) * 100}%`).$ }, void 0) }), void 0)] }), void 0));
+                        .h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`).$ }, void 0) }), void 0)] }), void 0));
 }
 exports.Stepper = Stepper;
 function StepButton({ label, disabled, state, isCurrent, onClick }) {

package/dist/forms/StepperFormApp.js

@@ -45,9 +45,9 @@ function StepperForm({ formState }) {
     const onBack = (0, react_1.useCallback)(() => {
         const currentStepIndex = steps.findIndex((s) => s.value === currentStep);
         setActiveStep(steps[currentStepIndex === 0 ? 0 : currentStepIndex - 1].value);
-    }, [currentStep]);
+    }, [currentStep, steps]);
     (0, react_1.useEffect)(() => {
-        const disposer = (0, mobx_1.reaction)(() => [formState.firstName.valid && formState.lastName.valid, formState.books.valid], ([step1Valid, step2Valid], [wasStep1Valid, wasStep2Valid]) => {
+        const disposer = (0, mobx_1.reaction)(() => [formState.firstName.valid && formState.lastName.valid, formState.books.valid, formState.birthday.valid], ([step1Valid, step2Valid, step3Valid], [wasStep1Valid, wasStep2Valid, wasStep3Valid]) => {
             if (step1Valid && step1Valid !== wasStep1Valid) {
                 setStep("books", { disabled: !step1Valid });
                 return;
@@ -56,10 +56,14 @@ function StepperForm({ formState }) {
                 setStep("misc", { disabled: !step2Valid });
                 return;
             }
+            if (step3Valid && step3Valid !== wasStep3Valid) {
+                setStep("misc", { state: "complete" });
+                return;
+            }
         });
         // Return the disposer in order to clean up useEffect.
         return disposer;
-    }, [setStep]);
+    }, [setStep, formState.birthday.valid, formState.books.valid, formState.firstName.valid, formState.lastName.valid]);
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Stepper_1.Stepper, { steps: steps, currentStep: currentStep, onChange: setActiveStep }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mt2.$ }, { children: [currentStep === "author" && (0, jsx_runtime_1.jsx)(AuthorDetails, { formState: formState, onNext: onNext }, void 0), currentStep === "books" && (0, jsx_runtime_1.jsx)(BookList, { formState: formState, onNext: onNext, onBack: onBack }, void 0), currentStep === "misc" && (0, jsx_runtime_1.jsx)(MiscAuthorDetails, { formState: formState, onBack: onBack }, void 0)] }), void 0)] }, void 0));
 }
 function AuthorDetails({ formState, onNext }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.137.9",
+  "version": "2.138.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",