@homebound/beam 4.14.4 → 4.14.5

package/dist/index.js

@@ -7139,6 +7139,10 @@ var pageContentPaddingX = {
     "--mdandup_paddingRight": maybeCssVar11(__maybeInc6(pageContentPaddingXValue))
   }]
 };
+var selfTopSpacedAttr = "data-self-top-spaced";
+var selfTopSpaced = {
+  [selfTopSpacedAttr]: true
+};
 function headerContentPaddingX(compact = false) {
   return compact ? {
     paddingLeft: "pl1",
@@ -24014,7 +24018,9 @@ function useScrollPinnedViewportBounds(anchorRef, enabled, getPinTopPx) {
     const isPinned = rect.top <= pinTopPx + 1;
     const topPx = isPinned ? pinTopPx : Math.round(rect.top);
     const heightPx = Math.max(0, Math.round(window.innerHeight - topPx));
-    setBounds((prev) => prev?.topPx === topPx && prev?.heightPx === heightPx ? prev : { topPx, heightPx });
+    setBounds(
+      (prev) => prev?.topPx === topPx && prev?.heightPx === heightPx && prev?.isPinned === isPinned ? prev : { topPx, heightPx, isPinned }
+    );
   }, [anchorRef]);
   useLayoutEffect6(() => {
     getPinTopPxRef.current = getPinTopPx;
@@ -24233,7 +24239,10 @@ function DocumentScrollRightPane({
         borderLeftWidth: "blw_1px",
         borderColor: ["bc_var", {
           "--borderColor": "var(--b-surface-separator)"
-        }]
+        }],
+        ...!!paneBounds?.isPinned ? {
+          transition: "tsn_top_200ms_cubic_bezier_0_4_0_0_2_1_height_200ms_cubic_bezier_0_4_0_0_2_1"
+        } : {}
       }),
       initial: {
         x: slideX
@@ -24697,6 +24706,7 @@ function GridTableLayoutActionsComponent(props) {
     display: "df",
     flexDirection: "fdc",
     gap: "g_1",
+    paddingTop: "pt3",
     paddingBottom: "pb2",
     ...view === "card" ? {
       paddingBottom: "pb3"
@@ -24889,7 +24899,7 @@ function GridTableLayoutComponent(props) {
     } : {
       display: "df",
       flexDirection: "fdc"
-    }), ...tid.tableWrapper, children: tableScrollContent })
+    }), ...showTableActions ? selfTopSpaced : {}, ...tid.tableWrapper, children: tableScrollContent })
   );
 }
 var GridTableLayout = React18.memo(GridTableLayoutComponent);
@@ -29205,49 +29215,41 @@ import { useLayoutEffect as useLayoutEffect14, useRef as useRef71, useState as u
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
-    return { state: "static", atTop: true };
+    return "resting";
   }
-  return { state: "hidden", atTop: false };
+  return "hidden";
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = useState62(initial.state);
-  const stateRef = useRef71(initial.state);
-  const [atTop, setAtTop] = useState62(initial.atTop);
-  const atTopRef = useRef71(initial.atTop);
+  const [state, setState] = useState62(initial);
+  const stateRef = useRef71(initial);
   const getTopOffsetRef = useRef71(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
   const lastScrollY = useRef71(Number.POSITIVE_INFINITY);
   const lastScrollHeight = useRef71(0);
   useLayoutEffect14(() => {
     if (!enabled) {
-      stateRef.current = "static";
-      atTopRef.current = true;
+      stateRef.current = "resting";
       lastScrollY.current = Number.POSITIVE_INFINITY;
       lastScrollHeight.current = 0;
-      setState("static");
-      setAtTop(true);
+      setState("resting");
       return;
     }
-    const commit = (nextState, nextAtTop) => {
+    const commit = (nextState) => {
       if (nextState !== stateRef.current) {
         stateRef.current = nextState;
         setState(nextState);
       }
-      if (nextAtTop !== atTopRef.current) {
-        atTopRef.current = nextAtTop;
-        setAtTop(nextAtTop);
-      }
     };
     const autoHideStateOnLayoutChange = (rect, topOffset) => {
       const nextAtTop = rect.top >= topOffset;
       let next = stateRef.current;
       if (nextAtTop) {
-        next = "static";
+        next = "resting";
       } else if (rect.bottom < -THRESHOLD && next !== "revealed") {
         next = "hidden";
       }
-      return { next, nextAtTop };
+      return next;
     };
     const updateAutoHideState = () => {
       const el = spacerRef.current;
@@ -29258,7 +29260,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
       lastScrollHeight.current = currentScrollHeight;
       if (window.scrollY <= 0) {
         lastScrollY.current = 0;
-        commit("static", true);
+        commit("resting");
         return;
       }
       const currentY = window.scrollY;
@@ -29266,8 +29268,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
       const topOffset = getTopOffsetRef.current?.() ?? 0;
       if (scrollHeightChanged) {
         lastScrollY.current = currentY;
-        const { next: next2, nextAtTop: nextAtTop2 } = autoHideStateOnLayoutChange(rect, topOffset);
-        commit(next2, nextAtTop2);
+        commit(autoHideStateOnLayoutChange(rect, topOffset));
         return;
       }
       const dy = currentY - lastScrollY.current;
@@ -29276,18 +29277,18 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
       const nextAtTop = rect.top >= topOffset;
       let next = stateRef.current;
       if (nextAtTop) {
-        next = "static";
+        next = "resting";
       } else if (rect.bottom < -THRESHOLD) {
         if (dy < 0 && !atBottom) next = "revealed";
         else if (dy > 0) next = "hidden";
       }
-      commit(next, nextAtTop);
+      commit(next);
     };
     updateAutoHideState();
     window.addEventListener("scroll", updateAutoHideState, { passive: true });
     return () => window.removeEventListener("scroll", updateAutoHideState);
   }, [enabled, spacerRef]);
-  return { state, atTop };
+  return { state };
 }
 
 // src/layouts/useMeasuredHeight.ts
@@ -29307,6 +29308,19 @@ function useMeasuredHeight(ref, enabled) {
   return height;
 }
 
+// src/layouts/useTransitionAfterPaint.ts
+import { useLayoutEffect as useLayoutEffect16 } from "react";
+function useTransitionAfterPaint(ref, transition) {
+  useLayoutEffect16(() => {
+    const el = ref.current;
+    if (!el) return;
+    const id = requestAnimationFrame(() => {
+      el.style.transition = transition;
+    });
+    return () => cancelAnimationFrame(id);
+  }, [ref, transition]);
+}
+
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 import { createContext as createContext18, useContext as useContext29 } from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
@@ -29333,10 +29347,9 @@ function NavbarLayout(props) {
   const spacerRef = useRef72(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
-    state: autoHideState,
-    atTop
+    state: autoHideState
   } = useAutoHideOnScroll(spacerRef, true);
-  const navOccupiesViewportTop = autoHideState === "revealed" || atTop;
+  const navOccupiesViewportTop = autoHideState !== "hidden";
   const navbarOffsetPx = navHeight > 0 && navOccupiesViewportTop ? navHeight : 0;
   const cssVars = navbarOffsetPx > 0 ? {
     [beamNavbarLayoutHeightVar]: `${navbarOffsetPx}px`
@@ -29350,9 +29363,9 @@ function NavbarLayout(props) {
     }],
     width: ["w_var", {
       "--width": maybeCssVar67(__maybeInc33(innerWidth))
-    }],
-    transition: "transitionTop"
+    }]
   };
+  useTransitionAfterPaint(navMetricsRef, "top 200ms cubic-bezier(0.4, 0, 0.2, 1)");
   const bannerTop = `var(${beamEnvironmentBannerLayoutHeightVar}, 0px)`;
   const innerStyle = {
     top: autoHideState === "hidden" ? `calc(${bannerTop} - ${navHeight}px)` : bannerTop
@@ -29378,11 +29391,11 @@ function NavbarLayout(props) {
 import { useCallback as useCallback43, useMemo as useMemo58, useRef as useRef73 } from "react";
 
 // src/hooks/useDocumentTitle.tsx
-import { useLayoutEffect as useLayoutEffect16 } from "react";
+import { useLayoutEffect as useLayoutEffect17 } from "react";
 function useDocumentTitle(...titleSegments) {
   const config = useDocumentTitleConfig();
   const pageTitle = joinDocumentTitleSegments(...titleSegments);
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     if (!config || !pageTitle || typeof document === "undefined") {
       return;
     }
@@ -29512,10 +29525,9 @@ function PageHeaderLayout(props) {
   const spacerRef = useRef73(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
-    state: autoHideState,
-    atTop
+    state: autoHideState
   } = useAutoHideOnScroll(spacerRef, true, getBannerAndNavbarHeight);
-  const headerOccupiesPosition = autoHideState === "revealed" || atTop;
+  const headerOccupiesPosition = autoHideState !== "hidden";
   const cssVars = headerHeight > 0 && headerOccupiesPosition ? {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
@@ -29532,9 +29544,9 @@ function PageHeaderLayout(props) {
     }],
     zIndex: ["z_var", {
       "--zIndex": maybeCssVar68(zIndices.pageStickyHeader)
-    }],
-    transition: "transitionAll"
+    }]
   };
+  useTransitionAfterPaint(headerMetricsRef, "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
   const innerStyle = {
     top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
   };
@@ -29550,12 +29562,12 @@ function PageHeaderLayout(props) {
       flexShrink: "fs0",
       width: "w100"
     }), children: /* @__PURE__ */ jsx236("div", { ref: headerMetricsRef, ...mergeProps42(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx236("div", { className: "df fdc fg1 mh0 w100 mt3", ...tid.body, children })
+    /* @__PURE__ */ jsx236("div", { className: "df fdc fg1 mh0 w100 first_child_n_data_self_top_spaced_mt3", ...tid.body, children })
   ] }) });
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { useLayoutEffect as useLayoutEffect17, useRef as useRef75 } from "react";
+import { useLayoutEffect as useLayoutEffect18, useRef as useRef75 } from "react";
 
 // src/components/Headers/WorkflowHeader.tsx
 import { jsx as jsx237 } from "react/jsx-runtime";
@@ -29768,7 +29780,7 @@ function WorkflowPageLayout(props) {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
   const showFooter = isMobile;
-  useLayoutEffect17(() => {
+  useLayoutEffect18(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");