@homebound/beam 3.70.0 → 3.72.0

package/dist/index.d.cts

@@ -9944,7 +9944,26 @@ type StepperTabProps = {
 };
 declare function StepperTab(props: StepperTabProps): JSX.Element;
 
-type StepperTabsStep = Pick<StepperTabProps, "label" | "value" | "completed" | "disabled">;
+type WorkflowActionsProps = {
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isMobile: boolean;
+    onBack: () => void;
+    /** Leaves the workflow without saving. Always shown. */
+    onCancel: (e: PressEvent) => void;
+    /** Saves partial progress and exits. Used whenever canExitEarly is true. */
+    onSaveAndExit?: (e: PressEvent) => void | Promise<void>;
+    /** Label for the completion button shown on the last step. */
+    completeLabel: "Create" | "Save";
+    /** Called when the completion button is clicked. Only shown on the last step. */
+    onComplete: (e: PressEvent) => void | Promise<void>;
+    /** Runs before continuing to the next step. Return `false` to stay put, like when the save failed. */
+    onContinue: () => boolean | void | Promise<boolean | void>;
+    /** Disables whichever of Continue/Complete is currently shown, e.g. while the active step is invalid. */
+    primaryDisabled?: boolean;
+};
+
+type StepperTabsStep = Pick<StepperTabProps, "label" | "value" | "completed" | "disabled"> & Partial<Pick<WorkflowActionsProps, "onContinue">>;
 type StepperTabsProps = {
     steps: StepperTabsStep[];
     currentStep: StepperTabsStep["value"];
@@ -10237,24 +10256,6 @@ type PageHeaderLayoutProps<V extends string, X> = {
 /** Page header + body shell with auto-hide chrome. Contract: `docs/layouts.md`. */
 declare function PageHeaderLayout<V extends string, X extends Only<TabsContentXss, X>>(props: PageHeaderLayoutProps<V, X>): JSX.Element;
 
-type WorkflowActionsProps = {
-    isFirstStep: boolean;
-    isLastStep: boolean;
-    isMobile: boolean;
-    onBack: () => void;
-    /** Leaves the workflow without saving. Always shown. */
-    onCancel: (e: PressEvent) => void;
-    /** Saves partial progress and exits. Used whenever canExitEarly is true. */
-    onSaveAndExit?: (e: PressEvent) => void | Promise<void>;
-    /** Label for the completion button shown on the last step. */
-    completeLabel: "Create" | "Save";
-    /** Called when the completion button is clicked. Only shown on the last step. */
-    onComplete: (e: PressEvent) => void | Promise<void>;
-    onContinue: () => void;
-    /** Disables whichever of Continue/Complete is currently shown, e.g. while the active step is invalid. */
-    primaryDisabled?: boolean;
-};
-
 /** A `WorkflowLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus the page content rendered while it's active — `completed` also gates the Continue/Complete CTA when this is the active step. */
 type WorkflowLayoutStep = Omit<StepperTabsStep, "value"> & {
     /** Rendered as the page body while this is the active step. */
@@ -10273,8 +10274,9 @@ type WorkflowLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix"
  *
  * A standalone, full-page layout for step-based workflow pages — nest it directly under
  * `EnvironmentBannerLayout`, never under `NavbarLayout`/`SideNavLayout`/`PageHeaderLayout`. Unlike
- * `PageHeaderLayout`, the header here never auto-hides; the stepper tabs collapse to a condensed
- * indicator bar on mobile instead.
+ * `PageHeaderLayout`, the header here never auto-hides. The stepper tabs always collapse to a condensed
+ * indicator bar on mobile, and on larger viewports also collapse once scrolled past a threshold,
+ * re-expanding on scroll-up (even before reaching the top).
  *
  * Owns the workflow's fixed CTA set (Back/Cancel/Save & Exit/Continue-or-Complete) via `WorkflowActions`
  * so it can move them into a mobile footer at the `sm` breakpoint — `WorkflowHeader` itself is not part

package/dist/index.d.ts

@@ -9944,7 +9944,26 @@ type StepperTabProps = {
 };
 declare function StepperTab(props: StepperTabProps): JSX.Element;
 
-type StepperTabsStep = Pick<StepperTabProps, "label" | "value" | "completed" | "disabled">;
+type WorkflowActionsProps = {
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isMobile: boolean;
+    onBack: () => void;
+    /** Leaves the workflow without saving. Always shown. */
+    onCancel: (e: PressEvent) => void;
+    /** Saves partial progress and exits. Used whenever canExitEarly is true. */
+    onSaveAndExit?: (e: PressEvent) => void | Promise<void>;
+    /** Label for the completion button shown on the last step. */
+    completeLabel: "Create" | "Save";
+    /** Called when the completion button is clicked. Only shown on the last step. */
+    onComplete: (e: PressEvent) => void | Promise<void>;
+    /** Runs before continuing to the next step. Return `false` to stay put, like when the save failed. */
+    onContinue: () => boolean | void | Promise<boolean | void>;
+    /** Disables whichever of Continue/Complete is currently shown, e.g. while the active step is invalid. */
+    primaryDisabled?: boolean;
+};
+
+type StepperTabsStep = Pick<StepperTabProps, "label" | "value" | "completed" | "disabled"> & Partial<Pick<WorkflowActionsProps, "onContinue">>;
 type StepperTabsProps = {
     steps: StepperTabsStep[];
     currentStep: StepperTabsStep["value"];
@@ -10237,24 +10256,6 @@ type PageHeaderLayoutProps<V extends string, X> = {
 /** Page header + body shell with auto-hide chrome. Contract: `docs/layouts.md`. */
 declare function PageHeaderLayout<V extends string, X extends Only<TabsContentXss, X>>(props: PageHeaderLayoutProps<V, X>): JSX.Element;
 
-type WorkflowActionsProps = {
-    isFirstStep: boolean;
-    isLastStep: boolean;
-    isMobile: boolean;
-    onBack: () => void;
-    /** Leaves the workflow without saving. Always shown. */
-    onCancel: (e: PressEvent) => void;
-    /** Saves partial progress and exits. Used whenever canExitEarly is true. */
-    onSaveAndExit?: (e: PressEvent) => void | Promise<void>;
-    /** Label for the completion button shown on the last step. */
-    completeLabel: "Create" | "Save";
-    /** Called when the completion button is clicked. Only shown on the last step. */
-    onComplete: (e: PressEvent) => void | Promise<void>;
-    onContinue: () => void;
-    /** Disables whichever of Continue/Complete is currently shown, e.g. while the active step is invalid. */
-    primaryDisabled?: boolean;
-};
-
 /** A `WorkflowLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus the page content rendered while it's active — `completed` also gates the Continue/Complete CTA when this is the active step. */
 type WorkflowLayoutStep = Omit<StepperTabsStep, "value"> & {
     /** Rendered as the page body while this is the active step. */
@@ -10273,8 +10274,9 @@ type WorkflowLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix"
  *
  * A standalone, full-page layout for step-based workflow pages — nest it directly under
  * `EnvironmentBannerLayout`, never under `NavbarLayout`/`SideNavLayout`/`PageHeaderLayout`. Unlike
- * `PageHeaderLayout`, the header here never auto-hides; the stepper tabs collapse to a condensed
- * indicator bar on mobile instead.
+ * `PageHeaderLayout`, the header here never auto-hides. The stepper tabs always collapse to a condensed
+ * indicator bar on mobile, and on larger viewports also collapse once scrolled past a threshold,
+ * re-expanding on scroll-up (even before reaching the top).
  *
  * Owns the workflow's fixed CTA set (Back/Cancel/Save & Exit/Continue-or-Complete) via `WorkflowActions`
  * so it can move them into a mobile footer at the `sm` breakpoint — `WorkflowHeader` itself is not part

package/dist/index.js

@@ -26469,7 +26469,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { useLayoutEffect as useLayoutEffect10, useRef as useRef68, useState as useState59 } from "react";
+import { useLayoutEffect as useLayoutEffect11, useRef as useRef69, useState as useState60 } from "react";
 
 // src/components/Headers/WorkflowHeader.tsx
 import { jsx as jsx215 } from "react/jsx-runtime";
@@ -26479,14 +26479,65 @@ function WorkflowHeader(props) {
   return /* @__PURE__ */ jsx215(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ jsx215(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
 }
 
+// src/layouts/useScrollCollapse.ts
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef67, useState as useState59 } from "react";
+function useScrollCollapse(enabled, restingOffset) {
+  const [collapsed, setCollapsed] = useState59(() => typeof window !== "undefined" && window.scrollY > 0);
+  const collapsedRef = useRef67(collapsed);
+  collapsedRef.current = collapsed;
+  const restingOffsetRef = useRef67(restingOffset);
+  restingOffsetRef.current = restingOffset;
+  const lastScrollYRef = useRef67(Number.POSITIVE_INFINITY);
+  const lastScrollHeightRef = useRef67(0);
+  useLayoutEffect10(() => {
+    lastScrollHeightRef.current = document.documentElement.scrollHeight;
+  }, [restingOffset]);
+  useLayoutEffect10(() => {
+    if (!enabled) return;
+    const commit = (next) => {
+      if (next !== collapsedRef.current) {
+        collapsedRef.current = next;
+        setCollapsed(next);
+      }
+    };
+    const updateCollapsed = () => {
+      const doc = document.documentElement;
+      const currentY = window.scrollY;
+      if (currentY <= 0) {
+        lastScrollYRef.current = 0;
+        lastScrollHeightRef.current = doc.scrollHeight;
+        commit(false);
+        return;
+      }
+      const currentScrollHeight = doc.scrollHeight;
+      const scrollHeightChanged = lastScrollHeightRef.current !== 0 && currentScrollHeight !== lastScrollHeightRef.current;
+      const dy = currentY - lastScrollYRef.current;
+      lastScrollYRef.current = currentY;
+      lastScrollHeightRef.current = currentScrollHeight;
+      if (currentY <= restingOffsetRef.current) return;
+      if (scrollHeightChanged) {
+        commit(true);
+        return;
+      }
+      const atBottom = currentY >= doc.scrollHeight - doc.clientHeight;
+      if (dy > 0) commit(true);
+      else if (dy < 0 && !atBottom) commit(false);
+    };
+    updateCollapsed();
+    window.addEventListener("scroll", updateCollapsed, { passive: true });
+    return () => window.removeEventListener("scroll", updateCollapsed);
+  }, [enabled]);
+  return collapsed;
+}
+
 // src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
-import { useEffect as useEffect38, useRef as useRef67 } from "react";
+import { useEffect as useEffect38, useRef as useRef68 } from "react";
 import { useBlocker } from "react-router-dom";
 import { jsx as jsx216 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = useRef67(isDirty);
+  const isDirtyRef = useRef68(isDirty);
   isDirtyRef.current = isDirty;
   useEffect38(() => {
     const onBeforeUnload = (e) => {
@@ -26570,7 +26621,7 @@ function WorkflowLayout(props) {
     ...step,
     value: defaultTestId(step.label)
   }));
-  const [currentStep, setCurrentStep] = useState59(() => getInitialStep(tabSteps, defaultStep));
+  const [currentStep, setCurrentStep] = useState60(() => getInitialStep(tabSteps, defaultStep));
   const tid = useTestIds(props, "workflowLayout");
   const {
     sm: isMobile
@@ -26582,9 +26633,11 @@ function WorkflowLayout(props) {
     isDirty,
     onCancel
   });
-  const headerMetricsRef = useRef68(null);
+  const bannerAndNavbarHeight = useBannerAndNavbarHeight();
+  const headerMetricsRef = useRef69(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
-  const collapsed = isMobile;
+  const scrollCollapsed = useScrollCollapse(!isMobile, bannerAndNavbarHeight + headerHeight);
+  const collapsed = isMobile || scrollCollapsed;
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
   const cssVars = headerHeight > 0 ? {
@@ -26594,9 +26647,16 @@ function WorkflowLayout(props) {
   const isFirstStep = currentIndex <= 0;
   const isLastStep = currentIndex === tabSteps.length - 1;
   const activeStep = tabSteps[currentIndex];
-  const buttons = /* @__PURE__ */ jsx218(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(tabSteps[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.completed, onContinue: () => setCurrentStep(tabSteps[currentIndex + 1].value) });
+  const buttons = /* @__PURE__ */ jsx218(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(tabSteps[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.completed, onContinue: async () => {
+    const onContinue = activeStep?.onContinue;
+    if (onContinue) {
+      const allowed = await onContinue();
+      if (allowed === false) return;
+    }
+    setCurrentStep(tabSteps[currentIndex + 1].value);
+  } });
   const showFooter = isMobile;
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");