@homebound/beam 3.71.0 → 3.72.0

package/dist/index.cjs

@@ -26936,7 +26936,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_react155 = require("react");
+var import_react156 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
 var import_jsx_runtime215 = require("react/jsx-runtime");
@@ -26946,16 +26946,67 @@ function WorkflowHeader(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
 }
 
-// src/layouts/WorkflowLayout/useUnsavedChangesGuard.tsx
+// src/layouts/useScrollCollapse.ts
 var import_react154 = require("react");
+function useScrollCollapse(enabled, restingOffset) {
+  const [collapsed, setCollapsed] = (0, import_react154.useState)(() => typeof window !== "undefined" && window.scrollY > 0);
+  const collapsedRef = (0, import_react154.useRef)(collapsed);
+  collapsedRef.current = collapsed;
+  const restingOffsetRef = (0, import_react154.useRef)(restingOffset);
+  restingOffsetRef.current = restingOffset;
+  const lastScrollYRef = (0, import_react154.useRef)(Number.POSITIVE_INFINITY);
+  const lastScrollHeightRef = (0, import_react154.useRef)(0);
+  (0, import_react154.useLayoutEffect)(() => {
+    lastScrollHeightRef.current = document.documentElement.scrollHeight;
+  }, [restingOffset]);
+  (0, import_react154.useLayoutEffect)(() => {
+    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
+var import_react155 = require("react");
 var import_react_router_dom9 = require("react-router-dom");
 var import_jsx_runtime216 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = (0, import_react154.useRef)(isDirty);
+  const isDirtyRef = (0, import_react155.useRef)(isDirty);
   isDirtyRef.current = isDirty;
-  (0, import_react154.useEffect)(() => {
+  (0, import_react155.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -26981,7 +27032,7 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  (0, import_react154.useEffect)(() => {
+  (0, import_react155.useEffect)(() => {
     openModal({
       allowClosing: false,
       content: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
@@ -27037,7 +27088,7 @@ function WorkflowLayout(props) {
     ...step,
     value: defaultTestId(step.label)
   }));
-  const [currentStep, setCurrentStep] = (0, import_react155.useState)(() => getInitialStep(tabSteps, defaultStep));
+  const [currentStep, setCurrentStep] = (0, import_react156.useState)(() => getInitialStep(tabSteps, defaultStep));
   const tid = useTestIds(props, "workflowLayout");
   const {
     sm: isMobile
@@ -27049,9 +27100,11 @@ function WorkflowLayout(props) {
     isDirty,
     onCancel
   });
-  const headerMetricsRef = (0, import_react155.useRef)(null);
+  const bannerAndNavbarHeight = useBannerAndNavbarHeight();
+  const headerMetricsRef = (0, import_react156.useRef)(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 ? {
@@ -27070,7 +27123,7 @@ function WorkflowLayout(props) {
     setCurrentStep(tabSteps[currentIndex + 1].value);
   } });
   const showFooter = isMobile;
-  (0, import_react155.useLayoutEffect)(() => {
+  (0, import_react156.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");