@homebound/beam 3.75.0 → 3.75.2

package/dist/Css.json

@@ -906,7 +906,7 @@
     "br24": {"kind":"static","defs":{"borderRadius":"24px"}},
     "brt4": {"kind":"static","defs":{"borderTopRightRadius":"4px","borderTopLeftRadius":"4px"}},
     "brb4": {"kind":"static","defs":{"borderBottomRightRadius":"4px","borderBottomLeftRadius":"4px"}},
-    "layoutContainer": {"kind":"static","defs":{"width":"calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px))","left":"var(--beam-side-nav-layout-width, 0px)","position":"sticky","paddingLeft":"24px","paddingRight":"24px"}},
+    "layoutContainer": {"kind":"static","defs":{"width":"min(100%, calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)))","left":"var(--beam-side-nav-layout-width, 0px)","position":"sticky"}},
     "transition": {"kind":"static","defs":{"transition":"background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},
     "transitionWidth": {"kind":"static","defs":{"transition":"width 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},
     "transitionOpacity": {"kind":"static","defs":{"transition":"opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},

package/dist/index.cjs

@@ -4228,12 +4228,12 @@ var CssBuilder = class _CssBuilder {
     return this.add("fontFamily", value);
   }
   // layoutContainer
-  /** Sets `width: "calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px))"; left: "var(--beam-side-nav-layout-width, 0px)"; position: "sticky"; paddingLeft: "24px"; paddingRight: "24px"`. */
+  /** Sets `width: "min(100%, calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)))"; left: "var(--beam-side-nav-layout-width, 0px)"; position: "sticky"`. */
   get layoutContainer() {
-    return this.add("width", "calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px))").add("left", "var(--beam-side-nav-layout-width, 0px)").add("position", "sticky").add("paddingLeft", "24px").add(
-      "paddingRight",
-      "24px"
-    );
+    return this.add(
+      "width",
+      "min(100%, calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)))"
+    ).add("left", "var(--beam-side-nav-layout-width, 0px)").add("position", "sticky");
   }
   // animation
   /** Sets `transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
@@ -24501,11 +24501,9 @@ function ContentHeader(props) {
     display: "df",
     flexDirection: "fdc",
     gap: "gap_12px",
-    width: "w_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px",
+    width: "w_min_100_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px",
     left: "l_var_beam_side_nav_layout_width_0px",
     position: "sticky",
-    paddingLeft: "pl_24px",
-    paddingRight: "pr_24px",
     backgroundColor: ["bgColor_var", {
       "--backgroundColor": "var(--b-surface)"
     }]
@@ -27227,7 +27225,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_react159 = require("react");
+var import_react158 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
 var import_jsx_runtime218 = require("react/jsx-runtime");
@@ -27237,67 +27235,16 @@ function WorkflowHeader(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
 }
 
-// src/layouts/useScrollCollapse.ts
-var import_react157 = require("react");
-function useScrollCollapse(enabled, restingOffset) {
-  const [collapsed, setCollapsed] = (0, import_react157.useState)(() => typeof window !== "undefined" && window.scrollY > 0);
-  const collapsedRef = (0, import_react157.useRef)(collapsed);
-  collapsedRef.current = collapsed;
-  const restingOffsetRef = (0, import_react157.useRef)(restingOffset);
-  restingOffsetRef.current = restingOffset;
-  const lastScrollYRef = (0, import_react157.useRef)(Number.POSITIVE_INFINITY);
-  const lastScrollHeightRef = (0, import_react157.useRef)(0);
-  (0, import_react157.useLayoutEffect)(() => {
-    lastScrollHeightRef.current = document.documentElement.scrollHeight;
-  }, [restingOffset]);
-  (0, import_react157.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_react158 = require("react");
+var import_react157 = require("react");
 var import_react_router_dom9 = require("react-router-dom");
 var import_jsx_runtime219 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = (0, import_react158.useRef)(isDirty);
+  const isDirtyRef = (0, import_react157.useRef)(isDirty);
   isDirtyRef.current = isDirty;
-  (0, import_react158.useEffect)(() => {
+  (0, import_react157.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -27323,7 +27270,7 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  (0, import_react158.useEffect)(() => {
+  (0, import_react157.useEffect)(() => {
     openModal({
       allowClosing: false,
       content: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
@@ -27379,7 +27326,7 @@ function WorkflowLayout(props) {
     ...step,
     value: defaultTestId(step.label)
   }));
-  const [currentStep, setCurrentStep] = (0, import_react159.useState)(() => getInitialStep(stepTabs, defaultStep));
+  const [currentStep, setCurrentStep] = (0, import_react158.useState)(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "workflowLayout");
   const {
     sm: isMobile
@@ -27391,11 +27338,8 @@ function WorkflowLayout(props) {
     isDirty,
     onCancel
   });
-  const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const headerMetricsRef = (0, import_react159.useRef)(null);
+  const headerMetricsRef = (0, import_react158.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
-  const scrollCollapsed = useScrollCollapse(!isMobile, bannerAndNavbarHeight + headerHeight);
-  const collapsed = isMobile || scrollCollapsed;
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
   const cssVars = headerHeight > 0 ? {
@@ -27414,7 +27358,7 @@ function WorkflowLayout(props) {
     setCurrentStep(stepTabs[currentIndex + 1].value);
   } });
   const showFooter = isMobile;
-  (0, import_react159.useLayoutEffect)(() => {
+  (0, import_react158.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -27426,12 +27370,19 @@ function WorkflowLayout(props) {
       }
     };
   }, [showFooter]);
-  const headerEl = /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(WorkflowHeader, { ...headerProps, rightSlot: isMobile ? void 0 : buttons, stepperTabs: {
-    steps: stepTabs,
-    currentStep,
-    onChange: setCurrentStep,
-    collapsed
-  } });
+  const headerEl = /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+    WorkflowHeader,
+    {
+      ...headerProps,
+      rightSlot: isMobile ? void 0 : buttons,
+      stepperTabs: {
+        steps: stepTabs,
+        currentStep,
+        onChange: setCurrentStep,
+        collapsed: isMobile
+      }
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(DocumentScrollLayoutProvider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { ...(0, import_runtime138.mergeProps)(void 0, cssVars, {
       display: "df",